1.用padding
padding设置百分比时，是相对于浏览器宽度设置的。
思路：将宽度设为百分比，高度为0，设置padding-top为百分比，这样当浏览器宽度变化时，宽高都会变化
缺点：div里面的内容被挤到外边来
<div class="content"> 这是自适应图片 </div> .content{ width: 30%; height: 0px; padding-top: 30%; background-color: red; }
我们可以看到，div里面的字被挤到外边来了
2.用vh，vw实现vh是viewport hight的缩写，是CSS3新增的单位。1vh表示视口高度的1%
1vw = 视口宽度的1%
<div class="content"> 通过vw，vh实现的正方形</div> </div> .content{ width: 50vw; height: 50vw; background-color: red; }3. 扩展：用js实现
<body> <div id="content"> js实现宽高自适应 </div> <script> window. = function(){ let content = document.getElementById("content") content.style.width = window.innerWidth*0.3 + "px" content.style.height = window.innerHeight*0.3 + "px" window.onresize = function(){ content.style.width = window.innerWidth*0.3 + "px" content.style.height = window.innerHeight*0.3 + "px" } content.style.backgroundColor = "red" } </script></body>window.onresize 监听视口变化
window.innerWidth 获取视口的宽度
window.innerHeight 获取视口的高度
作者：椰果粒
链接：https://www.jianshu.com/p/59211e5ab5db
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦