admin 管理员组

文章数量: 887007

css实现盒子高度随宽度等比例缩放的四种方式

前提：先去下margin,padding,方便看效果

*{margin:0;padding:0
}

方法一：定位
css

.container {background-color: silver;width: 100%;position: relative;display: inline-block;}.dummy {margin-top: 100%;}.content {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}

hmtl

<div class='container'><div class='dummy'></div><div class='content'>content</div></div>

方式二：css3 vm
利用使用vw直接搞定

.container {background-color: silver;width: 100%;height:100vw;}

方式三：img填充
利用img标签特性，放一张图片，让高度随着高度随着比例缩放（可以用base64弄张体积小的图）

.attr img{width: 100%;height: auto;dislplay:block;}

<div class='attr'><img src="=2460827703,4239870726&fm=26&gp=0.jpg" alt="">
</div>

方式四：padding
利用padding属性使用百分比继承父元素宽度的特性
css

#container {width: 80%;height: 500px;
}.attr {width: 50%;height: 0;padding-bottom: 50%;background-color: #008b57;
}

html

<div id='container'><div class='attr'></div>
</div>

本文标签： css实现盒子高度随宽度等比例缩放的四种方式

版权声明：本文标题：css实现盒子高度随宽度等比例缩放的四种方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732361402h1535319.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。