看到这个：
http://real-sense.com/index.php?option=com_content&view=article&id=106
右侧的垂直图像集正在使用 CSS 调整大小
.thumbnail-product-resize
{
width:144px;
height : auto;
}
有谁知道如何以更清洁的方式做到这一点，这样我就不会失去图像质量？
我的意思是，如果我使用 Photoshop 调整了图像的大小，文本就不会像这里那样模糊。
在 FF 中测试
谢谢
您的图像质量将取决于您使用的图像的原始大小。如果有一个质量很好的大图像，比如 size 400x500，然后在 HTML80x100中将其调整为 ，它仍然是400x500图像。但是，您只能在较小的图像上放置一定数量的像素80x100，因此必须对较大的图像进行采样。这意味着对像素进行平均，然后将其表示为80x100大小图像。如果您想要更明确的结果，您可以将图像的原始大小更改为80x100. 这可能会给你更好的结果。
曾几何时，由于他们用来缩放图像的简单的最近邻技术，浏览器图像大小调整给出了真正令人发指的结果。现在他们通常在缩放时执行过滤，并且在浏览器中调整大小和在 Photoshop 中调整大小之间没有太大区别。
在将图像提供给客户端之前缩放图像的真正优势在于，您不会在不需要时强制下载大图像。根据图像的大小，这可以显着减少页面加载时间。
最后要考虑的一件事是，越来越多的人拥有带有“视网膜”显示器的设备。对于那些用户在提供图像之前缩放图像将导致图像不那么清晰。
以下是各种浏览器使用的图像缩放方法的深入比较：http: //entropymine.com/resamplescope/notes/browsers/
即使您在 Photoshop 中完成了此操作，您所拥有的图像仍然会像刚才那样出现。
仅供参考，您不需要在上面的 CSS 中包含 height:auto 。
最好的办法是创建一组单独的缩略图（使用 Photoshop），它可能只显示图像的一部分。
以您的方式加载缩略图并使用 css 调整它们的大小是不好的做法，因为您仍然让用户首先下载大图像。
除非它是矢量图像，否则不可能在不损失质量的情况下缩小图像。这意味着您必须使用 SVG。考虑到显示的图像，我认为您不会这样做。
您还提到了更清洁的方法，使用 Photoshop 或类似的东西。