使用CSS定义一个和屏幕宽度一样正方形容器

本文链接：https://blog.csdn.net/kaelyn_X/article/details/78219202

使用CSS定义一个和屏幕宽度一样正方形容器

介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器。

问题

有时候，我们在移动端需要做一个商品展示页面，一打开页面，屏幕的上面一半展示为商品的图片，下面才是商品的文字信息介绍，那么我们要怎么实现在图片加载之前预留一个正方形区域给图片，防止一开始因为没有图片导致文字往上跑然后等图片加载出来后浏览器再对界面重排这一不优雅的情况发生，怎么设置图片的宽高使其宽高刚好等于屏幕的宽度呢。

解决方案

//html
<div class="square">
    <img class="img" src="img/drinks.jpg"/>
</div>

//css
.square{
    position: relative;
    width: 100%;
    padding-top: 100%;
    height: 0;
}
.img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

其实很简单，我们只需要设置包裹图片的父元素（同时也是 body 的子元素，也就是这里类名为 square 的 div ）其宽度为100% 还有 padding-top 为100% ，这样，在图片加载之前相对于区域就有一个和屏幕宽度一样的正方形容器。
查看css手册我们可以知道，当我们给 padding 赋值为百分比的时候，其数值时基于父元素的宽度的百分比的内边距，而这里的父元素宽度为100%即屏幕的宽度，所以其我们就可以获得一个和屏幕宽度一样的正方形容器。
然后我们再对图片标签进行定位和设置其宽度和高度都为100%，其数值为基于包含它的块级对象的百分比宽度和高度，也就是之前预留出来的正方形区域。