响应式圆形图像

Question

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

我有一个图像类：

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

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

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

当我尝试缩小窗口时，图像被压扁了。

现在我想知道是否有一种解决方案可以完全动态地解决这个问题，而无需像以往那样进行硬编码，制作横向和圆形的图像。

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

也不能选择使用背景图片。

Answer 1

您可以使所有图像圆润，方法是将图像包装在一个 div 中，然后

• 保持其纵横比为正方形（用于保持 div 纵横比的几种技术see here）
• 在包装上应用边框半径和overflow:hidden;。

这将防止图像显示为椭圆形。

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

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

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

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

• 横向图片从高度限制图片的大小
• 纵向图片从宽度限制图片尺寸

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%;
}

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

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