css怎么让div的高度随着宽度按比例缩放

html-css010

css怎么让div的高度随着宽度按比例缩放,第1张

css不完美的,看看这个文章:www.2cto.com/kf/201409/330076.html

应该用js取得宽度再用确定的宽高根据宽度算出高度,有些不能除尽的情况下有1px的差距。

设置对应图片的width和htight的具体数值就可以了。举例一个:

1

2

3

4

5

6

img{

width:auto

height:auto

max-width:100%

max-height:100%

}

这样设置图片的话,可以使图片在指定的空间内缩放。

举例:

1

2

3

4

<div style="width:50pxheight:40px">

<img src="a.jpg">

<!--这里我们假如图片的实际尺寸是320X320-->

</div>

根据上面4个css可以知道:

图片被缩放后在div的尺寸是:

width:50px(因为图片的width:100%)

height:50px(这里height是在width:100%被缩放后的尺寸。)

我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height

这个时候,max-height:100%就会发挥作用,

在max-height:100%的作用下,图片被缩放后在div的尺寸是:

width:40px

height:40px

这个尺寸符合max-height和max-width