9

画像をdivに収めるにはどうすればよいですか？画像サイズは、最大からdiv、または最小からdivになります。

htmlコード

<div class="main">
  <img scr="image.jpg">
</div>

CSSコード

.main{
  height:200px;
  width:200px;
}

img{
  // answer code
}

次のように画像のCSSを設定するにはどうすればよいですか？

  1. 画像の高さ100、幅100
  2. 画像の高さ300、幅300
4

3 に答える 3

19

次を使用できます。

img { max-width: 100%; height: auto; } // This would help you to automatically fit the image.

上記のcssコードは、サイズがdivよりも大きい画像に役立ちます。ただし、divよりも小さい画像には適合しません。目標を達成するには、jQueryが少し必要になります。以下で見つけてください。

$(document).ready(function(){
    imageWidth = $('.main img').width();
    parentWidth = $('.main').width();
    if (imageWidth > parentWidth) {
        $('.main img').css('width', '100%');
    }
});

画像がdivよりも小さい場合は、画像のサイズが変更され、要件に応じてdivに収まります。

したがって、cssとスクリプトを配置して、両方の条件で機能するようにします。

于 2012-06-21T07:37:37.557 に答える
1

これを要素の子「height：inherit;」で使用します。この要素は、パートナーと同じ高さになります。

.main{
       height:200px;
       width:200px;
}

.img{
  height: inherit; //the imagem will be heigth 200px automatic
}
于 2020-04-12T21:48:02.103 に答える
-1

画像が常に正方形の場合は、追加するだけです img{ width: 200px; height: 200px; }

そうでない場合は、

.main {
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
img {
    max-width: 200px;
    max-height: 200px;
    /* IE7 doesn't support display: table-cell property? so hack */
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');     }

ここでそれをチェックしてくださいhttp://jsfiddle.net/qBDT4/1/

于 2012-06-21T08:50:43.680 に答える