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

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

Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.

max-height 是另一种选择。