图片太大图片撑破页面变形的解决方法

wangsen2235068

于 2012-12-02 22:34:23 发布

阅读量2k

点赞数

分类专栏：其他技术

本文链接：https://blog.youkuaiyun.com/wangsen2235068/article/details/8249742

版权

其他技术专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用CSS和JavaScript优化网页图片加载性能，通过限制图片大小来提高页面加载速度，同时确保用户体验不受影响。具体方法包括在JavaScript中遍历所有图片元素，检查其尺寸，并对超过预设大小的图片进行尺寸调整，以及在CSS中应用响应式设计技巧，如`max-width`和`width`属性，实现动态调整图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script language="JavaScript">var imgObj;for(i = 0; i < document.all.length; i++){if(document.all(i).tagName.toLowerCase()=="img"){imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为200，值可以自己修改{imgObj.height=200}if (imgObj.width>500) //判断图片的宽度，如果大于500，则设置为200，值可以自己修改{imgObj.width=200}}}</script>

2.CSS里面加入下面这段代码就可以实现了

body img{
vertical-align: middle;
max-width: 500px;
    width: expression(this.width >500 && this.height < this.width ? 500: true);
}