负责任地改变div尺寸保持高宽比
负责任地改变div尺寸保持高宽比
江户川乱折腾浏览 435回答 3
3回答
-
UYOU
您可以使用纯CSS完成此操作；不需要JavaScript。这利用了(有点违背直觉的)事实padding-top百分比相对于包含块的百分比宽度..下面是一个例子：.wrapper { width: 50%; /* whatever width you want */ display: inline-block; position: relative;}.wrapper:after { padding-top: 56.25%; /* 16:9 ratio */ display: block; content: '';}.main { position: absolute; top: 0; bottom: 0; right: 0; left: 0; /* fill parent */ background-color: deepskyblue; /* let's see it! */ color: white;}<div class="wrapper"> <div class="main"> This is your div with the specified aspect ratio. </div></div> -
慕娘9325324
<style>#aspectRatio{ position:fixed; left:0px; top:0px; width:60vw; height:40vw; border:1px solid; font-size:10vw;}</style><body><div id="aspectRatio">Aspect Ratio?</div></body>这里要注意的关键是vw=视口宽度vh=视口高度
随时随地看视频慕课网APP
Html/CSS