css 图片自适应宽度 CSS实现控制图片自适应显示宽

在网站建设中，我们常常遇到一个棘手的问题：用户上传的图片尺寸过大，导致页面展示不协调。这个问题对于用户体验来说是非常关键的。为了解决这一问题，我们可以利用CSS中的max-width属性来智能地调整图片的显示尺寸。

在默认情况下，如果我们直接设置图片的宽度属性，可能会显得不够智能和灵活。幸运的是，Firefox、Opera以及IE7等浏览器都支持max-width属性。这一属性允许我们设定图片的最大显示宽度，当图片尺寸超过设定值时，浏览器会自动缩放图片。

假设我们希望图片的显示宽度不超过500像素，我们可以这样设置CSS样式：

```css

.fit-image {

border: 0;

max-width: 500px;

}

```

令人头疼的是，IE6浏览器不支持max-width属性。但IE浏览器有一些独有的特性，比如expression属性，我们可以利用这个属性来间接地解决这个问题。以下是针对IE6的CSS样式设置：

```css

.fit_image {

border: 0;

max-width: 700px;

width: expression(function(img) {

img.onload = function() {

this.style.width = '';

this.style.width = (this.width > 700) ? "700px" : this.width + "px";

};

return '700px';

}(this));

}

```

这段代码利用了标签的onload事件，当图片加载完成后，计算其尺寸大小。如果图片的宽度超过700像素，就将其宽度设置为700像素；否则，就保持图片的原始宽度。虽然这种做法并不符合标准的WEB开发规范，但在某些情况下，它却能成为解决问题的有效手段。我们不能否认IE浏览器的一些扩展功能在实际开发中的价值，因此我们不能轻视它。只有这样，我们才能确保在各种浏览器上都能提供一致的用户体验。