---
title: "图片缩放的问题"
url: "https://yjyj.net/css/461.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2008-03-27T15:01:00+08:00"
updated_at: "2008-03-27T15:02:18+08:00"
categories: "前端杂烩"
tags: "CSS布局技巧, JavaScript交互, 前端开发实战"
summary: "这篇前端杂烩老文专治图片在页面里“撑爆版面”的老问题：既想保留 CSS 控制，又要兼顾 IE6 对 max-width 的缺失。作者用 expression 做图片自动缩放，配合一次性加载避免内存泄漏，实测能有效消除横向滚动条，适合老旧浏览器兼容场景参考。"
source: "生猛大蝦 (https://yjyj.net)"
---

# 图片缩放的问题

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/461.html) · 作者：小 虾 · 发布时间：2008-03-27

## 30 秒核心看点 (TL;DR)

- 核心问题是图片过宽导致版面被撑坏，单靠 CSS 在旧浏览器里不够稳。
- 方案用 expression 触发图片自动缩放，兼顾 IE6 兼容，但要接受加载完成后才调整。
- 实操结论：比起横向滚动条，先保住页面可读性更重要，且一次性加载可降低泄漏风险。

来自:http://www.loveyuki.com/Article/CSS_Image_Autosize_IE_Firefox.aspx

一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width，今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页面后看到长长的横向滚动条舒服的多，这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏。当然，如果你有更好的解决方案，希望能与我交流。代码如下：

`.Image {      max-width:600px;height:auto;cursor:pointer;      border:1px dashed #4E6973;padding: 3px;      zoom:expression( function(elm) {          if (elm.width>560) {              var oldVW = elm.width; elm.width=560;              elm.height = elm.height*(560 /oldVW);         }         elm.style.zoom = '1';     }(this));} `

## 生猛大蝦编辑部 · 背景与实操延伸

这篇文章的价值不在“炫技”，而在老浏览器时代对兼容性的务实处理。图片自适应在今天看似基础，但在当年 IE6 不支持 max-width 的环境里，往往要靠 expression 这类折中方案救场。实操时要注意：这种写法更适合历史项目维护，不建议在现代新项目里照搬；同时要关注图片加载后的闪动、布局回流和可维护性，优先用更标准的响应式方案替代。

## 延伸问答与排错指南 (FAQ)

### IE6 下图片自动缩放怎么做？
可用 CSS 的 expression 在图片加载时判断宽度，超过阈值就按比例缩小，并把高度同步计算回来。这样能绕开 IE6 不支持 max-width 的问题，但效果通常要等图片下载完成后才会生效。

### 为什么不用 JS 直接控制图片大小？
直接写进 JS 虽然能做，但维护和修改都不如 CSS 集中。把逻辑放到样式层更便于统一管理，尤其是同类图片很多时，改一个规则就能批量生效。

### 图片缩放后如何避免页面出现横向滚动条？
关键是给图片设定最大宽度并保持等比缩放，让超宽图片自动收敛到容器内。即使旧浏览器只能在下载完成后调整，也比让页面被横向滚动条破坏阅读体验更实用。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)