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

Set an image to either 100% width or height, whichever comes first

本文关键字：高度 设置 图像 100%      更新时间：2023-09-26

我在div中有一个图像，我希望图像缩小到包含div的100%宽度或100%高度。 正如这里建议的，我尝试将最大高度和最大宽度都设置为 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)
  }
}

我希望这不是一个愚蠢的问题，但我已经搜索过，我找到的建议都没有奏效。

请尝试：

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

附加，我建议背景而不是<img>.

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

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

相关文章：