css3 - 在width值与浏览器宽度是固定比例的情况下，css怎么设置div的高恒等于宽？

问题描述

问 题

本来想说width是用百分比设置的，但是想想不一定是百分比才能做出这种效果，所以我改了用词

---

太感谢我采纳的答案了！这个问题困扰了我很久很久，一直是用js实现的，原来padding-top使用百分比的时候，是基于父元素宽度的百分比！我才发现，太out了。

---

另外我发现css3还有几个单位是解决这个的，但是安卓4.4以上才支持，所以不能用。

• vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

• vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

• vmin：vw和vh中较小的那个。

• vmax：vw和vh中较大的那个。
  vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，Android browser4.4+支持，chrome for android39支持

解决方案

width: 50%; padding-top: 50%;

这篇关于css3 - 在width值与浏览器宽度是固定比例的情况下，css怎么设置div的高恒等于宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！