Html 如何使图像 100% 适合大屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31147543/
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
How to fit 100% of an image to a Jumbotron
提问by jmn8
I have the following HTML:
我有以下 HTML：
<div class="jumbotron">
<div class="container">
<h1>Souplesse</h1>
<p>Be a Good Sport</p>
</div>
</div>
And the following CSS:
以及以下 CSS：
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: cover;
border-bottom:1px solid #ff6a00
}
.jumbotron .container {
position:relative;
top:50px;
}
My image is far too large to fit my height of 300px but I would like it to auto-resize and fit the height, so I can see all of my image. This must be simple but I can't see what changes need to be made.
我的图像太大而无法容纳 300 像素的高度，但我希望它自动调整大小并适合高度，以便我可以看到我的所有图像。这一定很简单，但我看不出需要进行哪些更改。
Thanks
谢谢
回答by Pete Droll
If you would like the background image to fit the height of your jumbotron, but don't care about if it stretches to the entire width:
如果您希望背景图像适合大屏幕的高度，但不关心它是否延伸到整个宽度：
.jumbotron { background-size: auto 100%; }
.jumbotron { background-size: auto 100%; }
If you want the background image to cover the entire height AND width of the jumbotron and you do notcare about the image's aspect ratio:
如果您希望背景图像覆盖超大屏幕的整个高度和宽度并且您不关心图像的纵横比：
.jumbotron {background-size: 100% 100%; }
.jumbotron {background-size: 100% 100%; }
If you want the background image to be cover the entire height AND width the jumbotron but you DOcare about the image's aspect ratio:
如果您希望背景图像是覆盖整个高度和宽度的超大屏幕，但你DO有关图像的长宽比护理：
.jumbotron { background-size: cover; }
.jumbotron { background-size: cover; }
That last option will have some of the image cut off if the jumbotron has a different aspect ratio than the image, but you can specify how the image is positioned with the background position property:
如果超大屏幕的纵横比与图像不同，最后一个选项将截断一些图像，但您可以使用背景位置属性指定图像的定位方式：
.jumbotron {
/* Image in the center of container */
background-position: center center;
/* OR Image in the center top of the container */
background-position: center top;
/* OR Image in the center bottom of the container */
background-position: center bottom;
}
回答by Patrick Hamil
Try:
尝试：
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: auto 100%;
border-bottom:1px solid #ff6a00
}
Note the:
请注意：
background-size: auto 100%;
The first value is the width, the second value is the height. It is compliant to use px or % for those values.
第一个值是宽度，第二个值是高度。对这些值使用 px 或 % 是合规的。
