使用 CSS 缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8790730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image scaling with CSS
提问by Daniel J F
I don't actually need it now, but just out of curiosity...
我现在实际上并不需要它，但只是出于好奇......
Suppose we have a fluidwebsite layout that works perfectly well on 1920px displays and on small smartphones. Now let's say we have images there and obviously (obviously?) we want to scale them. We've uploaded 2560px images on a server (because who cares about bandwidth nowadays) and set width: 100%property to the imgtag.
假设我们有一个流畅的网站布局，可以在 1920 像素显示器和小型智能手机上完美运行。现在假设我们有图像，显然（显然？）我们想要缩放它们。我们已经在服务器上上传了 2560 像素的图像（因为现在谁在乎带宽）并将width: 100%属性设置为img标签。
So we have two users: a programmer with a 1920px display, let's call him Jo, and a female student with a smartphone, let's call her Nancy (because everything is better with Nancy, right?).
所以我们有两个用户：一个拥有 1920px 显示器的程序员，我们称他为 Jo，一个拥有智能手机的女学生，让我们称她为 Nancy（因为 Nancy 一切都更好，对吧？）。
Jo and Nancy are happy because our plan with images scaling using width: 100%works, but what if we decided to show small images too, something like 400px width? Nancy won't notice anything, but for Jo it would be a disaster.
Jo 和 Nancy 很高兴，因为我们使用图像缩放的计划width: 100%有效，但如果我们也决定显示小图像，比如 400px 宽度怎么办？南希不会注意到任何事情，但对乔来说这将是一场灾难。
So the question is: can we make Jo and Nancy happy without using JavaScript?
所以问题是：我们可以在不使用 JavaScript 的情况下让 Jo 和 Nancy 开心吗？
回答by Filip
Why not go for the max-width: 100%instead?
为什么不去max-width: 100%呢？
This will leave all the images that are smaller than the width of the screen alone and the ones that are wider than the screen will be resized too 100%. Problem solved, everyones happy!
这将使所有小于屏幕宽度的图像单独存在，而大于屏幕的图像将被调整为 100%。问题解决了，大家开心！
回答by Mr Lister
If you want to send different pictures to different screens based on their widths, you should dive into those conditional media queries we keep hearing about.
This is a nice website: http://webdesignerwall.com/tutorials/css3-media-queries
如果您想根据宽度将不同的图片发送到不同的屏幕，您应该深入研究我们不断听到的条件媒体查询。
这是一个不错的网站：http: //webdesignerwall.com/tutorials/css3-media-queries
回答by ContextSwitch
I used max-width: 100%as Filip had mentioned, but I also needed to include:
我max-width: 100%像 Filip 提到的那样使用，但我还需要包括：
height:auto
height:auto
Otherwise the height wouldn't scale.
否则高度不会缩放。
