Question

我正在使用带有Angular 9和圆形轮廓图片的引导程序。如果我放width: 19rem和height: 19rem，图片会保持四舍五入，但是当我使用较小的分辨率时，它将溢出到下一列。

有什么方法可以使宽度保持100％并且高度会动态变化，以使其具有相同的长宽比（四舍五入）？

非常感谢您！

.mainImage {
  height: 19rem;
  width: 19rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

Answer 1

使用查看端口：

fiddle检查响应性。

.mainImage {
  height: 15vw;
  width: 15vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

<div>
  <img class="mainImage" src="http://placekitten.com/301/301">
</div>

大小为65vm：

.mainImage {
  height: 65vw;
  width: 65vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100%;
  border: 5px #35c68f solid;
}

<div>
  <img class="mainImage" src="http://placekitten.com/301/301">
</div>

Answer 2

如果我了解的是：如果您希望所有图像都适合圆角，可以将其包含在图像中

img = { object-fit: cover; }

页面调整高度和宽度时相同

2 个答案: