Question

我目前正在为自己创建一个动态样式表，我将来会使用它，因此我希望它是动态的而不是硬编码。

我有一个图像类：

.image-round{
    border-radius: 50%;
}

这个类适用于所有方形图像，但是当我尝试矩形图像时，我得到一个椭圆形。

我尝试使用jQuery来解决这个问题，将图像包装在一个容器中，我将其隐藏起来并将其高度和宽度设置为等于图像的高度。这解决了这个问题，但现在我面临着响应问题。

当我尝试缩小窗口时，图像会变暗。

现在我想知道是否有一个完全动态地解决这个问题的解决方案，没有硬编码，在横向和纵向制作图像。

我真的想避免在窗口调整大小时检查图像大小，然后重新调整容器大小 - 因为我很确定这会带来很多性能。

也不能使用背景图片。

Answer 1

您可以通过将图像包装在div和

中来使所有图像成为

将其宽高比保持为正方形（对于保持div see here的宽高比的几种技术）
在包装器上应用border-radius和overflow:hidden;。

这样可以防止图像以椭圆形显示。

然后问题是处理每个图像宽高比，横向和纵向，以便它们居中并且＆＃34;覆盖＆＃34;容器。为此，您可以像这样使用object-fill property：

＆＃13;

div{
  position:relative;
  width:20%;
  padding-bottom:20%;
  border-radius:50%;
  overflow:hidden;
}
img{
  position:absolute;
  object-fit: cover;
  width:100%;height:100%;
}

＆＃13;

<div><img src="http://i.imgur.com/uuEyxxE.jpg" /></div>
<div><img src="http://i.imgur.com/HDssntn.jpg" /></div>

＆＃13;

缺点是IE doesn't support object-fill。所以你需要一个后备来处理两种情况：

风景图像限制图像的高度
人像图像限制图像宽度

＆＃13;

div{
  position:relative;
  width:20%;
  padding-bottom:20%;
  border-radius:50%;
  overflow:hidden;
}
img{
  position:absolute;
  margin:auto;
}
.landscape img{
  height:100%;
  left:-100%; right:-100%;
}
.portrait img{
  width:100%;
  top:-100%; bottom:-100%;
}

＆＃13;

<div class="landscape"><img src="http://i.imgur.com/uuEyxxE.jpg" /></div>
<div class="portrait"><img src="http://i.imgur.com/HDssntn.jpg" /></div>

＆＃13;

在此配置中，您需要JS识别横向或纵向图像并相应地设置样式。

响应圆形图像

1 个答案: