自适应图片一般在在做手机APP的时候会遇到，下面是效果图
下面是代码
<body> <div class="father"> <img src="./image/leiyu.jpg" /> <h1>我是标题</h1> <p>霍山石斛售后卡德哈卡德哈卡和打开回到家呃呃呃贝贝</p> </div> </body> <style> .father{ width: 100%; padding-bottom: 75%; } img{ width: 100%; height: 100%; } </style> 自适应正方形就更简单了 .father{ height:10vw;//设置成10%的100vw和width的值相等（设置10%是不生效的，这个最简单） width:10%;//随视图的大小变化而变化 } 标签：width,100%,10%,适应,正方形,卡德,图片 From： https://www.cnblogs.com/zhao-qin/p/17065476.html