CSS实现正方形自适应大小

缺乏、安全感 2023-05-31 02:39 20阅读 0赞

1、给标签宽度但是不设置高度，设置内边距padding，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>自适应正方形</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding:0;
    		}
    		.box{
    			width: 50%;
             	padding-top: 50%;
            	background-color: black;
    		}
    	</style>
    </head>
    <body>
    	<div class="box"></div>
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

2、给标签设置宽度但是不设置高度，在标签内部添加一个空元素，给空元素设置外边距margin-top来实现，如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>自适应正方形</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding:0;
    		}
    		.Box{
    			width: 50%;
    			overflow: hidden;
    			background: black;
    		}
    		.Mrgin{
    			margin-top: 100%;
    		}
    	</style>
    </head>
    <body>
    	<div class="Box">
    		<div class="Mrgin"></div>
    	</div>
    </body>
    </html>

结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3][]

自适应正方形实现的原理就是根据标签元素的padding会自动继承元素的宽度来计算，并且元素内部的子元素的margin也是根据父元素宽度的百分比来算的，从而能实现自适应的正方形。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20230531/aaeab04bab8a4ab5b5afa412580a18cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/f73f41cd21b74ca38d95d26ad4cf8146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/d2df56141a1f45c8b6c8979539826516.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/b41a9025ab6545b6a678adbf467b8305.png