我目前正在为自己创建一个动态样式表,我将来会使用它,因此我希望它是动态的而不是硬编码的.
我有一个图像类：
.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%;
}缺点是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%;
}
在此配置中,您将需要JS来识别横向或纵向图像并相应地设置它们的样式.
