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

Question

我正在开发一个网站项目，在标题部分我有一个包含6个图像的网格（2行，每行3个图像）。使用max-width:100%和height:auto使它们响应（有点“流动”）不是问题，但是这个网站将来应该与某些管理工具相关联，因此最终用户可以上传自己的图像。

因此，我需要了解如何保持这两行图像的响应，但同时给它们一个固定的高度（在这种情况下，它们应该是220px）。当我裁剪图像并使它们都高度相等（使用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像素的图像。

max-height是另一种选择。

Answer 2

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

如果你想要2行，220px高度，每个有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>

请注意，行是240px而不是220只是因为你可以很容易地看到行（红色背景），我添加了相同的原因图像容器的白色边框。

FIDDLE

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

绿色是图像容器的背景：

FIDDLE

可能有更好的选择，但没有jquery的帮助，我无法帮助你

Answer 3

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

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

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