CSS CSS使图像调整大小并适应任何屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19720550/
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
CSS to make images resize and fit any screen the same
提问by abtecas
I've been working with a temp page at http://www.flywavez.combut I can't get the image to resize and be the same in all screen resolutions. On the iPhone it cuts the girl off before the waist, and it fits perfectly when viewed on my 19" laptop screen with the res at 1366 x 768, and even when I fed the video to my 55" TV via VGA from my laptop. However when I view at larger monitors with greater resolution, there is a big space and obvious view where the image size ends. I thought I had resizing CSS with /* Tablet Landscape */ @media screen and (max-width: 1060px) { #wrapper { width:67%; } }
我一直在http://www.flywavez.com使用临时页面，但我无法调整图像大小并在所有屏幕分辨率下保持相同。在 iPhone 上，它在腰部之前切断了女孩，在分辨率为 1366 x 768 的 19 英寸笔记本电脑屏幕上观看时，它非常适合，甚至当我从笔记本电脑通过 VGA 将视频传送到 55 英寸电视时也是如此。但是，当我在分辨率更高的更大显示器上观看时，图像尺寸结束的地方有很大的空间和明显的视图。我以为我用 /* Tablet Landscape */ @media screen 和 (max-width: 1060px) { #wrapper { width:67%; } }
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}
I want this image to display on all resolutions as it does when seen on the 1366 x 768.
我希望此图像以所有分辨率显示，就像在 1366 x 768 上看到的一样。
Thanks for any help.
谢谢你的帮助。
回答by onestepcreative
I think it is fundamentally impossible to achieve what you are trying to do without losing image ratio, which is probably undesirable. Have you considered using the 'background-size' property? The css below achieves a pretty good look:
我认为在不丢失图像比例的情况下实现您想要做的事情从根本上是不可能的，这可能是不可取的。您是否考虑过使用“背景大小”属性？下面的 css 看起来很漂亮：
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can see it here: http://jsfiddle.net/DTN54/
你可以在这里看到它：http: //jsfiddle.net/DTN54/
回答by Riya Travel
cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
cover 该关键字指定背景图片应该被缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。
contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover
contains 该关键字指定背景图片应该被缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。所以尝试使用包含而不是封面
100% This will scale 100% to both of height and width without any cropping.
100% 这将 100% 缩放到高度和宽度，而不进行任何裁剪。
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
回答by ene sorin
Basically, this is all you need:
基本上，这就是你所需要的：
body {
background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
