divにイメージを収める方法watherイメージのサイズはdivまたはminの最大値です。div

Question

divにイメージを収めるにはどうすればいいですか？画像のサイズはdiv、min、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
を使用でき

Answer 1

： -

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

EDIT：

上記CSSコードは、その大きさのdivより大きいイメージのためにあなたを助けるでしょう。しかし、divより小さい画像には適合しません。 jQueryののビットは、以下のことを見つけてくださいあなたの目標をachiveするために必要とされるであろう： -

画像は、それ自体のサイズを変更し、あなたの要件ごとにdiv要素にフィットするdiv要素よりも小さい場合で何が起こる

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

。

したがって、両方の条件で動作するようにCSSとスクリプトを配置します。あなたのイメージは常に正方形である場合

Answer 2

は ``のために別のクラス/ IDを使用することができないならば、ちょうど、 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/