我现在并不需要它，只是出于好奇......
假设我们有一个流体网站布局，在1920px显示器和小型智能手机上运行良好。现在让我们说我们有图像，显然（显然？）我们想要缩放它们。我们在服务器上上传了2560像素的图像（因为现在谁关心带宽）并将width: 100%属性设置为img标记。
所以我们有两个用户：一个1920px显示器的程序员，让我们称他为Jo，一个带智能手机的女学生，让我们打电话给她Nancy（因为南希的一切都好，对吧？）。
Jo和Nancy很高兴因为我们使用width: 100%进行图像缩放的计划有效，但是如果我们决定显示小图像，如400px宽度会怎么样？南希不会注意到任何事情，但对于乔来说这将是一场灾难。
所以问题是：我们可以在不使用JavaScript的情况下让Jo和Nancy满意吗？
答案 0 :(得分：22)
为什么不转而使用max-width: 100%？
这将使所有小于屏幕宽度的图像保留，并且宽度大于屏幕的图像将调整为100％。问题解决了，大家都开心了！
答案 1 :(得分：2)
如果您想根据宽度将不同的图片发送到不同的屏幕，您应该深入了解我们一直听到的有条件的媒体查询。
这是一个不错的网站：http://webdesignerwall.com/tutorials/css3-media-queries
答案 2 :(得分：1)
我使用了max-width: 100%正如菲利普所提到的那样，但我还需要包括：
height:auto
否则高度不会缩放。