Question

您好我在容器中有一个设置为width: 100%的图像。

我想知道是否有任何方法可以产生高度，使其成为一个完美的正方形。

所以说原始图像宽450像素，高300像素。

css的宽度为100％，因此它会拉伸并填充容器，但图像仍为矩形。

是否有可能做一些css或jquery技巧来生成一个高度，使这个图像成为一个完美的suqare？

我不在乎图像是否被裁剪或拉伸并且看起来很时髦，我只需要它就是一个完美的正方形。

谢谢！

Answer 1

您可以使用以下jQuery

执行此操作

var img_width = $('#image').width();
$('#image').css({'height':img_width+'px'});

希望有所帮助。

Answer 2

所以你可以延伸图像 - 这可以是一个CSS解决方案：

使用padding-top: 100%
根据需要将图像拉伸到方形容器中，绝对定位。

见下面的演示：

＆＃13;

.wrapper {
  border: 1px solid red;
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  box-sizing: border-box;
  position: relative;
}
.wrapper img {
  width: 100%;
  vertical-align: top;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <img src="http://placehold.it/400x300" />
</div>

＆＃13;

Answer 3

使用直接CSS，您可以将宽度和高度设置为100vw。

Answer 4

由于您不关心图像是否被裁剪或扭曲，因此布局很简单。

只需将overflow: hidden添加到容器中即可。图像可以是任何大小。

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 2px solid red;
  overflow: hidden;
}

＆＃13;

<div>
  <img src="http://www.placekitten.com/450/300">
</div>

＆＃13;

使用css制作一个百分比宽度为完美正方形的图像

4 个答案: