CSS中高度根据宽度自适应的方法

html-css09

CSS中高度根据宽度自适应的方法,第1张

由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width的一定比例就可以了。比如正方形:

未完待续

只能让图片看起来像是100和150

指定div的宽度,然后用百分比设置图片的宽:

div{

  overflow:hiddenwidth:400px

}

div img{

  width:50%

}

div的实际高度为margin+border+padding+height

也就是外边距+边框线+内边距+元素自身的高度。

例如:

div{margin: 10px padding: 10px border-width:10px height:50px }

那么  这个div实际占用页面的高度就是110px