0

div 内のネストされた img のサイズが変更されないようにしたい。これは私が使用しているCSSです：

<div id="profile-gallery-image">
  <img src="..." />
</div

#profile-gallery-image {
border: 2px solid rgba(223,223,223,1);
width: 100px;
height: 100px;
overflow: hidden;
display: inline-block;

}

私が得る結果はこれです：

ここに画像の説明を入力

実際の画像は 100x100 ボックスよりも大きくなっています。そのため、外側にあるものはすべて非表示にする必要があります。

4

4 に答える 4

0

background-size属性を使用して、画像サイズをロックしてみてください。

于 2012-10-03T22:46:20.387 に答える
0

コンテナ ボックスはここでは当てはまりません。画像は CSS または JavaScript を介してサイズ変更されているようです。

次のスタイルを使用してみてください。

#profile-gallery-image img {
    width: auto;
    height: auto;
}

このコードが機能しない場合は、JS またはより具体的な CSS 宣言によってオーバーライドされていることを意味します。この場合、Developer Tools または Firebug を使用してそれらのイメージを検査し、それらがまだ適用されるかどうかを確認します。!important( のように) コードに追加することもできますがwidth: auto !important;、絶対に必要な場合にのみ使用することを忘れないでください。

于 2012-10-03T23:55:05.917 に答える
0

別のイメージ タグを使用する代わりに、背景イメージを使用して div 内にイメージを表示することができます。

<div id="profile-gallery-image" style="background-image:url('images/imagename.jpg');">
</div>

#profile-gallery-image {
border: 2px solid rgba(223,223,223,1);
width: 100px;
height: 100px;
overflow: hidden;
display: inline-block;
background-repeat:no-repeat;
background-position:left;
}
于 2012-10-04T01:27:53.827 に答える