如何在 <img> 标签内创建具有固定高度的响应式图像？

Question

我正在做一个网站项目，在标题部分我有一个由 6 个图像组成的网格（2 行，每行 3 个图像）。使用max-width:100% 和height:auto 使它们响应（有点“液体”）不是问题，但是该网站将来应该与一些管理工具链接，因此最终用户可以上传他们自己的图像。

因此，我需要了解如何让这两行图像保持响应，同时给它们一个固定的高度（在这种情况下它们应该是 220 像素）。当我裁剪图像并使它们的高度都相等时（使用 Photoshop），一切正常，但是一旦我使用具有不同高度值的图像，网格就会开始中断。是否有任何已知的解决方法？ 提前致谢！

Answer 1

使用百分比和@media 示例：

@media only screen and (min-width : 320px) {
   img {
      width:40%;
      height:60%; /*Images should be bigger in small devices*/
   }
}

 @media only screen and (min-width : 480px) {
  img {
      width:30%;
      height:55%;
  }
 }

请注意：百分比是从父级计算的。例如，如果您将图像放在宽度为 400 像素、高度为 300 像素的 div 中，它将在最小高度为 320 像素的设备上显示宽度为 160 像素、高度为 180 像素的图像。

最大高度是另一种选择。

Answer 2

如果您的目标是保持图像（或其容器的）高度固定，这意味着图像不会以流畅的方式拉伸或收缩。鉴于这个概念在实践中是矛盾的，我将向您展示一个“响应式”解决方案，该解决方案来自于使容器元素本身具有响应性，而不是代替图像。

您所指的情况（2 行 3 幅图像）听起来像是实现级联图像外观的好地方。当页面宽度缩小时，图像将在彼此下方浮动，而当网站宽度被拉伸时，反之亦然；这实质上实现了流畅且响应迅速的功能，而不会影响图像高度本身。下面的代码应该应用你需要的“构建块”来实现这个效果......当然你可以在这里做很多自定义工作（比如使用背景：封面，而不是建议的 img 标签在 cmets 中）。看看，让我知道这是否有助于您更接近您想要实现的目标。

HTML

<div class="wrapper bg-purple center-div">
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
</div>

<div class="clear-both"></div>

<div class="wrapper bg-cyan center-div">
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
</div>

CSS

.wrapper { 
    display: table;
}
.img-container {
    height: 50px;
    padding: 2px;
}
.center-div {
    margin: 0 auto;
}
.left {
    float: left;
}
.clear-both {
    clear: both;
}
.bg-purple {
    background-color: purple;
}
.bg-cyan {
    background-color: cyan;
}

@media only screen and (max-width: 450px) {
  .left {
      clear: both;
  }
}

Answer 3

好吧，让我们看看我是否对你的问题理解得足够好（我的英语不好，不是你的）。

如果你想要 2 行，每行 220 像素的高度，每行 3 个图像填充行的宽度，同时保持与父级相同的高度，您可能遇到的问题是图像会扭曲以适应其响应式父容器。

这可能对您不起作用，因为即使您的图像在纵横比（高度 x 宽度）上相似，一旦窗口宽度变小（响应式），它们就会过度失真。

这是一个示例：我使用了不同尺寸的图像，一些是水平的，一些是垂直的，这样更容易理解。

Basic html:
<div class="header">
    <div class="row">
        <div class="img">
            <img src="" />
        </div>    
        <div class="img">    
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div> 
    </div>
    <div class="row">
        <div class="img"> 
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div> 
    </div>
</div>

请注意，该行是 240 像素而不是 220 像素，以便您可以轻松看到该行（红色背景），出于同样的原因，我在图像容器中添加了一个白色边框。

FIDDLE

我会尝试的选项是使图像适合容器而不会变形，它们将适合高度或宽度，但当然，如果适合高度或顶部和底部，它们将在侧面留出空间如果宽度合适，但至少图像将始终在容器中居中：

绿色是图像容器的背景：

FIDDLE

可能有更好的选择，但如果没有 jquery 的帮助，我无法为您提供更多帮助