网页前端布局中,我们经常需要元素宽度高度等比例协调变化,特别是响应式自适应网页,下面我们将分享4种解决方案。
方法1:使用一个隐藏的图片
这个方法不需要考虑任何兼容性,PC移动端完美运行。除了增加了一个dom结构,但是相对与一个页面成百上千的代码来说,不值一提
我们知道,div容器如果不给定高度,它的高度会随着容器内部的元素变化而撑大,这个时候,我们在容器内部添加一张符合我们宽高比例的图片,给图片设置宽度100%;高度auto。不管我们的父容器如何变化,内部的img宽度都是100%,图片是会严格按照比例i自动缩放的,相应的,我们内部的子容器的盖度也就会按照比例缩放了#container { width: 100%;
} .attr { background-color: #008b57;
} .attr img{ width: 100%; height: auto;
}
如果你觉得增加img标签多发了http请求,也可以采用base64图片编码帮你解决这个问题,适合不太大的图片,这样可以省掉http请求。
方法2:使用vmin单位
这个单位也是css3的新单位(css3大法好~),我们将父容器的宽度和高度定义为相同的vmin,这样父容器的高度和宽度就是相同值,这个时候,子容器的宽高值设为百分比,不管父容器大小如何变&