使用 CSS 缩放图像答案

【问题标题】：Image scaling with CSS使用 CSS 缩放图像
【发布时间】：2014-05-09 01:56:59
【问题描述】：

我现在实际上并不需要它，只是出于好奇......

假设我们有一个 fluid 网站布局，它在 1920 像素显示器和小型智能手机上运行良好。现在假设我们在那里有图像，显然（显然？）我们想要缩放它们。我们已经在服务器上上传了 2560px 的图像（因为现在谁在乎带宽）并将width: 100% 属性设置为img 标签。

所以我们有两个用户：一个有 1920 像素显示屏的程序员，我们称他为 Jo，另一个有智能手机的女学生，我们称她为 Nancy（因为 Nancy 一切都更好，对吧？）。

Jo 和 Nancy 很高兴，因为我们使用 width: 100% 缩放图像的计划可行，但是如果我们决定也显示小图像，比如 400 像素宽呢？南希不会注意到任何事情，但对于乔来说，这将是一场灾难。

所以问题是：我们可以不使用 JavaScript 让 Jo 和 Nancy 开心吗？

【问题讨论】：

什么才能让他们开心？此外，向智能手机提供 2560 像素的图像是一个糟糕的主意。
如果我们的图片可以在 Nancy 的智能手机上缩放并且 Jo 将看到 400 像素的图片，他们会很高兴。
你的意思是像<img src="image.jpg" width="100%" />那样把图片的宽度属性设置为100%？
@MrMisterMan，不，img { width: 100% } 中的 CSS
使用slimmage.js or something similar that keys off max-width to select the right image。将 1920 像素的图像提供给移动设备是一个糟糕的主意；每百万像素的图像使用约 16MB 的移动 RAM。无论带宽如何，这都会让手机崩溃。

【解决方案1】：

为什么不改用max-width: 100%？

这将保留所有小于屏幕宽度的图像，而大于屏幕宽度的图像将被调整为 100%。问题解决了，大家开心！

【讨论】：

【解决方案2】：

如果您想根据宽度将不同的图片发送到不同的屏幕，您应该深入了解我们经常听到的那些条件媒体查询。
这是一个不错的网站：http://webdesignerwall.com/tutorials/css3-media-queries

【讨论】：

【解决方案3】：

我使用了 Filip 提到的max-width: 100%，但我还需要包括：

height:auto

否则高度不会缩放。

【讨论】：