使用纯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

最新文章

最近回复

  • 测试: 评论测试内容
  • 袅残烟: [嘻嘻]万网域名也降价了
  • yxy: 以后,我会经常来逛的。
  • 袅残烟: LXDE可以搭配xf...
  • Fooleap: 从好几年前用 Lub...

分类

  • 默认分类 (26)
  • 运维 (53)
  • docker (1)
  • 动漫 (19)
  • 科普知识 (15)
  • 苍白边缘 (17)
  • 资源 (12)
  • Linux (58)
  • Arch Linux (19)
  • 计算机 (18)
  • 编程 (3)
  • Java (4)
  • python (0)
  • php (0)
  • 前端 (1)
  • 公告 (1)
  • 归档




      其它