美文网首页
图片容器大小不确定,图片宽度自适应

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

作者: 砚婉儿 | 来源:发表于2020-06-16 15:00 被阅读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%;
        }
    }
    

    相关文章

      网友评论

          本文标题:图片容器大小不确定,图片宽度自适应

          本文链接:https://www.haomeiwen.com/subject/tmqrxktx.html