css完结保险div的等宽高比,css怎样落到实处保证div等高宽比

说明:其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。

下面以高宽 2:1 为例,通过2种方式来实现这种效果。

时间: 2018-11-08阅读: 2654标签: 布局

总结

style.wrapper { background: #ccc; width: 10%;}.wrapper::before { content: ''; padding-top: 200%; float: left;}.wrapper::after { content: ''; display: block; clear: both;}/stylediv 这是内容/div

方式一:利用定位实现

方式二:利用伪元素

style.wrapper { background: #ccc; width: 10%;}.wrapper::before { content: ''; padding-top: 200%; float: left;}.wrapper::after { content: ''; display: block; clear: both;}/stylediv 这是内容/divweb前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

方式一:利用定位实现

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度,创建一个响应正方形。 此方法还允许内容正常放置在元素内部。

个人推荐使用方法二,这样可以减少div的嵌套。不过方法一的兼容更好

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。

二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。

二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。

该方法来自:30 Seconds of CSS。

方式二:利用伪元素

这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现。

.wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%;}.inner{ position : absolute; top : 0; left : 0; right : 0; bottom : 0;}/stylediv div 这是内容/div/div

总结:

时间: 2019-12-10阅读: 80标签: 宽高

下面以高宽 2:1 为例,通过2种方式来实现这种效果。

个人推荐使用方法二,这样可以减少div的嵌套。不过方法一的兼容更好

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度,创建一个响应正方形。此方法还允许内容正常放置在元素内部。

说明:其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

.wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%;}.inner{ position : absolute; top : 0; left : 0; right : 0; bottom : 0;}/stylediv div 这是内容/div/div

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:css完结保险div的等宽高比,css怎样落到实处保证div等高宽比

相关阅读