纯CSS无表达式实现未知尺寸图片等比缩放(支持

在网页设计中，我们常常遇到一个棘手的问题：如何在固定大小的容器中放置尺寸未知的图片，同时保证图片能够等比缩放，避免溢出容器或变形。

面对这个问题，有些人选择使用JavaScript来尝试解决。他们的代码示例如下：

```html

image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

```

这种解决方案虽然能够缩小图片尺寸，但当图片的宽高比例差异较大时，仍有可能出现变形的情况。为了改进这一点，另一种优化后的JavaScript缩放算法应运而生：

```html

image-url.png" onload="resize(this, 100, 100);" />

```

在不考虑IE6的情况下，我们可以使用更简洁、高效的CSS方法来实现同样的效果，无需使用可能降低性能的CSS表达式。代码如下：

```html

```

在这段代码中，CSS的`.box img`样式确保了图片在容器内的等比缩放。`max-width: 100%`和`max-height: 100%`保证了图片不会超出其所在容器的尺寸，而`width: auto`和`height: auto`则保证了图片保持原始比例。这样，我们就能在不牺牲网页性能的情况下，优雅地解决图片缩放问题。