图片容器大小不确定,图片宽度自适应

2020-06-16  本文已影响0人  砚婉儿

图片设置高度等于宽度
在图片容器大小不确定的情况下,想设置图片的宽度自适应,高度等于宽度,也就是正方形显示。
解决方法:
利用padding-top的特性结合定位实现,
padding-top值为百分比时该值默认按宽度计算,用padding-bottom也行。

.imgWrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}
上一篇 下一篇

猜你喜欢

热点阅读