CSS响应图像不保持正方形

Question

我有一个图像，其中 src 是动态加载的，所以我不知道它的大小，我还需要保持它的响应性，所以我设置了:

.resImg {
  display:block;
  border:5px solid yellow;
  width:100%;
  overflow: hidden;
}

问题是我需要在保持百分比的同时保持图像的正方形，但有些图像显示为矩形。

我该怎么做？

Answer 1

这是一个巧妙的 CSS 技巧:

.resImg {
  display:block;
  border:5px solid yellow;
  width:100%;
  overflow: hidden;
  padding-bottom:100%;
  background:url(http://lorempizza.com/500/500) scroll no-repeat center/cover;
}

<div class="resImg"></div>

它是如何工作的？

如果 padding 设置为百分比，则该百分比是根据元素的宽度计算的。如果你想让元素的高度和宽度一样高，将 padding-bottom(或 padding-top)设置为 100%，高度将为 100% 宽度。

要解决不同尺寸图像的问题，只需将图像设置为背景图像，就像我在示例中所做的那样。

Here's a JSFiddle to play with