做网站客源,佛山网站seo公司,html网站的规划与建设6,网页制作模板简单前言#xff1a;在很多网站#xff0c;不管页面宽度的变化#xff0c;都需要里面的图片或者视频#xff0c;宽高比不变。有两种实现方式。
1. aspect-ratio 属性
使用 aspect-ratio 属性可以直接定义元素的宽高比#xff0c;但是有兼容性问题
!DOCTYPE html
在很多网站不管页面宽度的变化都需要里面的图片或者视频宽高比不变。有两种实现方式。
1. aspect-ratio 属性
使用 aspect-ratio 属性可以直接定义元素的宽高比但是有兼容性问题
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /metanameviewportcontentinitial-scale1.0, user-scalableno, widthdevice-width/titledocument/titlestyle.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}/style/headbodydiv classitem/divscript/script/body
/html
2. 使用包含块
再套一层元素使用 padding-top 撑开包含块再嵌套一层元素填写类型绝对定位上包含快。
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /metanameviewportcontentinitial-scale1.0, user-scalableno, widthdevice-width/titledocument/titlestyle.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}.inner {width: 100%;padding-top: 75%;height: 0;position: relative;}.container {position: absolute;width: 100%;height: 100%;}/style/headbodydiv classitemdiv classinnerdiv classcontainer这是内容/div/div/divscript/script/body
/html
