如果根据父容器设置宽度,则可以将高度设置为0,并将填充-底部设置为百分比,该百分比将根据当前宽度计算:

.img-div {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    img {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

这在所有主要浏览器中都能很好地工作。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐