画像を100％幅または高さのいずれかに設定します。いずれか早い方に設定します。

Question

div内に画像があり、画像を100％幅または100％高さに縮小します。 hereが示唆しているように、私はmax-heightとmax-widthの両方を100％に設定しようとしました。これはまだいくつかのオーバーフローを引き起こします（そして私はオーバーフローでイメージをトリミングしたくありません：隠されています）。画像はdiv内で浮動します。

これは可能ですか？私のコードは以下の通りです。私は何か間違っているのですか？

div#_content div#_thumbnails div { 
    padding:2px; 
    display:inline-block; 
    min-width:10%; 
    max-width:25%; 
    min-height:80px; 
    max-height:125px; 
    text-align:center; 
} 
div#_content div#_thumbnails img { 
    display:inline; 
    padding:2px; 
    float:left; 
    max-height:100%; 
    max-width:100%; 
} 

以下のjavascriptでは、imgsはURLのリストです。サムネイルは、容器が中に座って母のdivである。

for (i in imgs) { 
    if (imgs[i]) { 
    var new_img = document.createElement('IMG'), 
     container = document.createElement('DIV') 
    new_img.setAttribute('alt', "image"+i.toString()) 
    new_img.setAttribute('src', imgs[i]) 
    container.appendChild(new_img) 
    thumbnails.appendChild(container) 
    } 
} 

私はこれがあると思いばかな質問ではありませんが、私が検索したと私が見つけたのいずれの方法でも働いていません。

Answer 1

ための最適なソリューションです試してみてください。

<style type="text/css"> 
#thumbContainer { 
    position:relative; 
} 
.thumb{ 
    position:relative; 
    float:left; 
    width: 100%; 
    height: auto; 
} 
.thumb img { 
    background-size: cover !important; 
    width: 100%; 
    height: auto; 
} 
</style> 

<div id="thumbContainer"> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div> 
</div> 

を（http://jsfiddle.net/ahjjg/）

Adittional、私は<img>の背景instedをお勧めします。

Answer 2

あなたがPHPを使用している場合、これはあなた

http://www.welancers.com/perfect-solution-for-image-resizing-based-on-width-height/