使用纯CSS自动调整全局图片大小,防止图片尺寸过大

网站的主内容页面通常是有宽度限制的,如果突然有了一张很宽很宽的图片,整个网站就被挤变形了。用CSS就可以轻松避免这种情况的发生。

添加如下CSS:

img
    {  
        max-width: 100%;  
        hight: auto;  
        border-radius:3px;
    }  

代码中的max-width:100%限制图片的最大宽度和content宽度一致,而下面的hight:auto很关键,可以保证图片有正确的长宽比,不至于因为被调整宽度而变形,border-radius:3px是用来在图片四角添加圆角.

像我博客https://blog.pcwuyu.com/index.php/Cartoon/secret-base.html中的一张图片分辨率为1920x1079,直接引入的话肯定会超出边界,但是添加css后就会自动调整图片宽度防止超出边界,美观多了.


以上!
@2014.04.04


转载请注明出处(http://blog.pcwuyu.com/2014/491.html)
添加新评论