twitter-bootstrap Div class="jumbotron" 缩放到其背景图像的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31753283/
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
Div class="jumbotron" to scale to size of its background image
提问by BDS
I have image of size 1400x560 and I want the my jumbotrondiv to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560pxHere is a preview of the html page http://threeguys.us/rts/testing.html.
我有大小为 1400x560 的图像，我希望我的jumbotrondiv 可以缩放以适应图像的大小。当我将超大屏幕的宽度设置为图像的宽度时，它工作正常，但是当我将网站缩小到移动视图时，我遇到了问题。那么我该如何解决这个问题？
我忘了提到我的高度问题而不是宽度问题，大屏幕将 div 缩放到 1400 的宽度，但不是高度 560px这是 html 页面http://threeguys.us/rts/testing的预览。 html.
When i shrink the page , i want the image to resize according to the width of the browser
当我缩小页面时，我希望图像根据浏览器的宽度调整大小
index.html
索引.html
<div class="jumbotron">
</div>
css
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
回答by intcreator
What you're looking for is background: contain;. Simply add this to your class as follows:
你要找的是background: contain;. 只需将其添加到您的类中，如下所示：
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div(assuming the divis scalable). If you want to constrain your divso it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
背景图像现在将随着 的大小缩放div（假设div是可缩放的）。如果您想限制div它，使其不会大于某个大小（在您的情况下，背景图像的大小），请使用max-width: 1400px;
See my JSFiddle example.
请参阅我的JSFiddle 示例。
回答by Maximillian Laumeister
There isn't a way to get the divto fit the size of its background image, so I suggest you use an imgtag instead.
没有办法让div适合其背景图像的大小，因此我建议您改用img标签。
To get your divto fit the size of the image, use display: inline-blockon the div:
要让您div适合图像的大小，请display: inline-block在 div 上使用：
.jumbotron
{
display: inline-block;
border: solid red 1px;
}<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>回答by cesar moro
Try:
尝试：
background-size: 100%;
width:100%
position:relative;
Hope it helps you
希望对你有帮助
回答by Rick
Wrap your jumbotronwith:
包裹你jumbotron：
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
它应该使其宽度适合页面的其余部分。
回答by Hassan Siddiqui
Make it simple. Thanks
让它变得简单。谢谢
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}<div class="jumbotron"></div>