将图像设置为100％宽度或高度，以先到者为准

Question

我在div内有一个图像，我希望图像缩小到包含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>。

Answer 2

如果您使用的是PHP那么这是给你的

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