原链接：http://blog.pcwuyu.com/2014/491.html

原分类：默认分类

网站的主内容页面通常是有宽度限制的，如果突然有了一张很宽很宽的图片，整个网站就被挤变形了。用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