Question

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

因此，我需要了解如何保持这两行图像的响应，但同时给它们一个固定的高度（在这种情况下，它们应该是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%;
  }
 }

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

max-height是另一种选择。

Answer 2

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

您所指的情况（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;
  }
}

Answer 3

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

如果你想要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的帮助我无法帮助你更多

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

3 个答案: