CSS按比例自动缩放图片大小

  • max-width
  • max-height

之前对该两个 css 标签一直存在误解,若对某一图片仅指定 max-width 时,图片会自动将高度也按其比较进行缩放;同理,max-height 也会进行相应的缩放。在此之前,一直是通过 javascript 计算好比例后再设定其对应的 width 和 height 值,惭愧!

例子:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <style type="text/css">
        img {
           max-width:300px; 
           _width:expression_r(this.width<400px?"auto":"400px"); 
        }
        </style>
    </head>

    <body>
        <img src="/9f1011b3d651bbf1d8335a69.jpg" id="foo" />
    </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注