大多数网络浏览器使调整文本大小变得轻而易举*，但并非所有网络浏览器都会随着文本一起调整图像大小**。优秀的网页设计师知道这一点，并竭尽全力确保他们的网页布局在调整文本大小时不会出现问题。但您知道可以使图像随着文本一起放大和缩小吗？
诀窍是给您的图像一个唯一的类，并使用 em 值设置它们的宽度。
HTML
<img src="images/fruit.jpg" alt="fruit" class="expand" />CSS
img.expand { width: 10em; }现在，因为您在强制对该图像使用特定宽度，所以网络浏览器负责进行调整大小，这通常不受欢迎。不过，我倾向于不同意，我知道网络浏览器永远无法像 Photoshop 一样智能地保留图像质量，但事实胜于雄辩，我认为网络浏览器通常在这方面做得很好。
**诀窍是**：确保您的起始图像比默认大小更大。如果您的图像大小与它在默认文本大小下显示在屏幕上的大小完全相同，那么在放大时会失去图像质量。但如果您的图像更大，它会在默认大小下缩小，并有空间在保持分辨率的同时放大。
*当然，除了 IE <= v6，它不会调整以像素为单位设置的字体大小。**当然，除了 Firefox 和 Opera 的最新版本等非常棒的网络浏览器。
这意味着图像大小会比它应该的更大吗？
在 Safari 中效果很好，总体来说概念很棒。希望看到一个稳固的跨浏览器实现。
迫不及待地等待浏览器原生支持 CSS 图像调整大小，最终我们可能会进入真正可调整大小的布局的时代。
回复 Chad：是的。使用此技巧，图像的实际大小（以千字节为单位）将保持不变。例如，示例页面上的水果图像大小为 145KB，大约是它缩小后需要大小的 10 倍。
但这并不意味着它是一种糟糕的技术。它实际上相当酷。但您可能不希望在您担心用户带宽的地方使用它。
Opera 已经支持图像调整大小。
一段时间前，我写了一篇关于可调整大小布局的文章
http://taat.pl/typografia/skalowalny_layout.html
（抱歉，目前只有波兰语）
但您会理解代码 :)
在底部还有一个简单的 GreaseMonkey 脚本，用于实现
Firefox 和 IE 中的原生图像缩放。
太酷了！
我猜这类似于 IE7 中的放大功能？
为了使页面加载速度更快，不应该在 img 标签上指定 width 和 height 属性吗？而且，您肯定不能让 CSS 覆盖这些属性，一旦它们被设置。
“height 和 width 属性让用户代理了解图像或对象的尺寸，以便它们可以为其保留空间，并在等待图像数据时继续呈现文档。”
HTML4 规范。——宽度和高度
但是，这是一个很棒的小技巧……
好技巧。但是，如果您想要获得最佳图像质量，默认大小应该与实际图像大小相同。
在这种情况下，您如何做到这一点？
使用更大的图像仅在 Safari 中效果良好。
看看我做的截图（在 Windows 上）
http://taat.pl/typografia/browser_resize_screenshots.png
酷技巧。这基本上扩展了 Jeffrey Zeldman 发布的一个旧技巧（如果我记得正确的话）。该概念证明页面仍然可以在 http://aneventapart.com/atlanta06/em-based/aea-scale.html 查看。
虽然回想起来我不明白为什么有人想要夸大他们图像的大小，并为那 1% 以更大字体设置查看网站的人消耗更多带宽。
@Dennison
当然，除非您属于那 1%……
;)
@Tomek：感谢您创建这些截图！这真的很有趣。我并没有完全看到这些结果，尽管我认为我在创建此内容时进行了太多文本调整，以至于我认为我并没有意识到“实际”默认值有多小。我认为，如果您将其提高一级，跨浏览器的结果会好得多。
@Dennison：是的，它确实会夸大大小，但它不需要像这个示例那样极端。只要放大到足以提升一个档位通常就可以了。人们通常不需要以 72pt 的大小查看正文 =）感谢您提供该链接！这是一个在实际布局中使用它的很棒的示例。
@Jermayn：实际上我不确定 IE7，但我知道 Opera 和 Firefox 的最新版本都内置了图像放大功能，并且效果非常好。所以，这可能是一个过时的技巧。我只是觉得它有点酷……。
一个非常简单的解决方案，而且非常有效，感谢分享。
我经常将它与设置的 max-width 相结合，以便最大物理尺寸和设置为物理尺寸一半的 min-width（此时以像素为单位）。在 IE 中不起作用。
这是一个好技巧。过去我经常使用这种技术，尽管我（个人）永远不会使用全尺寸图像。这不是负面的，只是感觉如果目的是为了增强手动放大字体大小的视力障碍用户的体验，他们可能更关心内容而不是下载高分辨率图像。我认为它有很多用途（艺术家网站浮现在脑海），但我认为通过 CSS 缩减高分辨率图像可能是应该谨慎使用的做法。总的来说，这是一个很棒的技巧，如果您将其与旧的缩放布局技术相结合，您就可以获得一个在大多数浏览器（甚至在 IE5 中）完全调整大小的非常棒的布局。
感谢 Chris - 很好。
关于 Anders 的评论 #6… 尽管您需要使用一些 PHP 或其他东西来避免插入内联标签代码……人们可以继续指定 W+H，然后在 img 标签中添加 style=”width:Wem;height:Hem;” 。当然，然后也不需要 Chris 创建的“类样式”。
对于那些有兴趣的人，我将我的 em 分辨率设置为 10px（在网上搜索像素到 em），这样我就不必将等效的 Wpx 值计算成奇怪的 em 值，所以我要做的就是如果图像在 Width=560 和 Height=601 下降，我设置的 em 为 width:56;height:60.1，并且效果很好。这是 1 比 1 的比率……当然，它可以调整为任何您想要的值。
请注意，我尝试了几十种方法，试图在 img 标签中指定 H+W，并从样式表中完成其余操作，但我认为这不可能。
是的……但 150kb 的图像大小……我能说什么……))) 这太糟糕了 )))
你好！您能否看一下“www.promisingdesigner.com”网站，并告诉我如何使它的主页标题图像在不同的分辨率下可扩展？请用详细的（示例）建议我，因为我非常头疼……grrrr :D :)