响应式圆形图像

Question

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

我有一张图片class:

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

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

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

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

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

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

也不是使用背景图片的选项。

Answer 1

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

中来使所有图像变圆

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

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

然后问题是处理每个图像纵横比，横向和纵向，使它们居中，"cover" 容器。为此，您可以像这样使用 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 来识别横向或纵向图像并相应地设置它们的样式。

响应式圆形图像

Responsive circular images

javascript

css

jquery

responsive-design

css-shapes