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

我在一个div中有一个图像，我希望该图像缩小到包含div的100%宽度或100%高度。正如建议的那样，我已尝试将“最大高度”和“最大宽度”都设置为100%。这仍然会导致一些溢出（我不想用overflow:hidden裁剪图像）。图像在div中浮动

有可能做到这一点吗？我的代码如下。我做错什么了吗

div#u内容div#u缩略图div{
填充：2px；
显示：内联块；
最小宽度：10%；
最大宽度：25%；
最小高度：80px；
最大高度：125px；
文本对齐：居中；
}
div#u内容div#u缩略图img{
显示：内联；
填充：2px；
浮动：左；
最大高度：100%；
最大宽度：100%；
}

在下面的javascript中，imgs是URL的列表。缩略图是容器将放在其中的母分区

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)
  }
}

---

我希望这不是一个愚蠢的问题，但我已经搜索过了，我发现的任何建议都不起作用。

如果您使用的是PHP，那么这是最适合您的解决方案

请尝试：

<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>

#拇指容器{
位置：相对位置；
}
.拇指{
位置：相对位置；
浮动：左；
宽度：100%；
高度：自动；
}
.拇指img{
背景尺寸：封面！重要；
宽度：100%；
高度：自动；
}

(http://jsfiddle.net/ahjjg/)

---

另外，我建议背景而不是

需要有一个100%父div（或元素）的图像吗？我实际上是在努力使.thumb在thumbContainer中居中，所以我的解决方案有点偏离。使用背景更容易（我选择了背景大小：contain；背景位置：center；）。谢谢