javascript – 响应圆形图像

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

我有一个图像类：

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

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

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

当我尝试缩小窗口时,图像变得模糊.

现在我想知道是否有一个解决方案可以完全动态地解决这个问题,没有硬编码就是这样,在横向和纵向制作图像.

我真的想避免在窗口调整大小时检查图像大小,然后重新调整容器大小 – 因为我很确定这将需要很多性能.

它也不是使用背景图像的选项.

最佳答案

您可以通过将图像包装在div中来使所有图像变圆

>保持其纵横比为正方形(对于几种技术来维持div see here的纵横比)
>应用border-radius和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%;
}

imgur.com/uuEyxxE.jpg" />imgur.com/HDssntn.jpg" />

缺点是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%;
}

imgur.com/uuEyxxE.jpg" />imgur.com/HDssntn.jpg" />

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