Html 如何在<；img>；标签？

我正在做一个网站项目，在标题部分我有一个6幅图片的网格（2行，每行3幅图片）。使用

max width:100%

和

height:auto

，让他们具有响应性（有点像“液体”）不是问题，但是这个网站将来应该与一些管理工具链接，这样最终用户可以上传他们自己的图像

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

使用百分比和@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中，它将在最小高度为320px的设备上显示宽度为160px、高度为180px的图像。

---

最大高度是另一种选择。

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

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

HTML

---

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

如果您想要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>

Basic html:

请注意，该行是240px而不是220，这样您就可以很容易地看到该行（红色背景），出于同样的原因，我在图像容器中添加了白色边框

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

绿色是图像容器的背景：

---

也许有更好的选择，但如果没有jquery的帮助，我就帮不了你更多了

你想让它们看起来“伸展”吗？也许在某个地方创建一个演示页面并链接到这里？你可以在css中为这些图像设置一个

max height

值。是的，我需要保持他们的响应行为，但同时固定他们的高度（因为最终用户可能想要上传他们自己的图像），它们的高度可能会不同。你能贴一把小提琴吗？把它们放在固定在220px

height=50px的容器里？@Tegos你可以选择你自己的高度，如果你喜欢：）除了这个问题要求固定高度，这是一个固定高度哈哈哈@Tegos明白了吗
.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;
  }
}

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>