如何实现一个自适应的图片或者正方形

自适应图片一般在在做手机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%;//随视图的大小变化而变化
}
posted @ 2023-01-23 20:20  ZQ-404  阅读(42)  评论(0)    收藏  举报