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

Answer 2

试试这个黑客：

.resImg {
  display:block;
  border:5px solid yellow;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

Reference

Answer 3

查看CSS和HTML的更多内容会有所帮助，但是当您将宽度设置为100％时，是否尝试过设置height: auto;？随着宽度的增加，这将使图像保持默认的宽高比，但是如果所有图像都不是正方形，则可能需要采用不同的方法将它们平方而没有任何失真。

如果使用图像作为背景是一种选择，Jacob的上述解决方案效果很好。

CSS响应图像不保持平方

3 个答案: