CSS Bootstrap 图像适合屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22266935/
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
Bootstrap Image fit to screen
提问by Zeeshan
I tried to scale image to browser screen using bootstrap, just like thiswebsite.
我尝试使用引导程序将图像缩放到浏览器屏幕，就像这个网站一样。
By setting
通过设置
img {
max-width: 100%;
max-height: 100%;
}
it does show full image, but shows scrolls as well. Scrolls are being countered through:
它确实显示了完整的图像，但也显示了卷轴。卷轴正在被反击：
body {
overflow-y: hidden;
overflow-x: hidden;
}
Now, the problem is, I am unable to show complete image on screen. It does crop some portion of image (in case image is bigger than browser window).
现在，问题是，我无法在屏幕上显示完整的图像。它确实裁剪了图像的某些部分（以防图像大于浏览器窗口）。
Anyone to help me please? Thanks.
任何人都可以帮助我吗？谢谢。
回答by Jiteen
You should restrict the Width and Height of the image to screen size.
您应该将图像的宽度和高度限制为屏幕尺寸。
I notice that instead of using min-widthand min-heightproperties, you are using max-widthand max-height
我注意到您使用的是和，而不是使用min-width和min-height属性max-widthmax-height
Check out the JS Fiddle
查看JS 小提琴
Try the following code :
试试下面的代码：
body {
background:url("images/your_image.jpg"); // Your Image URL
min-height : 100%;
min-width : 100%;
background-size:100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
You can find it here : JS Fiddle
你可以在这里找到它：JS Fiddle
Hope this helps !
希望这可以帮助 ！
回答by trungk18
Bootstraphas the built-in img-responsiveclass for this purpose. This applies max-width: 100%;, height: auto; and display: block;to the image so that it scales nicely to the parent element.
Bootstrap具有img-responsive用于此目的的内置类。这适用max-width: 100%;, height: auto; and display: block;于图像，以便它可以很好地缩放到父元素。
html,
body {
height: 100%;
margin: 0;
padding: 1em;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<img class="img-responsive" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" />
</body>回答by Mad Dog Tannen
I've been trying this morning a bit and I finally got it to work.
今天早上我一直在尝试，我终于让它工作了。
Below is the code:
下面是代码：
body {
background: url('/yourimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#fff;
background-color:#333;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}
