首先是宽度固定。利用CSS的width属性可以指定元素的宽度,大家可以将其设置为一个固定的像素值或者百分比值。例如,下面的代码将一个div元素的宽度设置为300像素:
div { width: 300px; }
接下来是高度等比例缩放。大家可以利用CSS的padding或者伪元素来实现。首先是padding方式,大家将元素的padding-bottom属性设置为一个固定的百分比值,该百分比值应该是元素高度和宽度的比例。例如,下面的代码将一个div元素的高度设置为宽度的50%:
div { width: 300px; padding-bottom: 50%; }
其次是伪元素方式,大家可以使用伪元素:before或:after来实现。首先要将元素的position属性设置为relative,然后再对伪元素进行绝对定位。例如,下面的代码将一个div元素的高度设置为宽度的50%:
div { width: 300px; position: relative; } div:before { content: ''; display: block; padding-top: 50%; }
以上是CSS实现宽度固定,高度等比例缩放的方法。