如何将100％的图像放入Jumbotron中

问题描述

我有以下HTML：

 < div class =jumbotron> 
< div class =container> 
< h1> Souplesse< / h1> 
< p>成为一项好运动< / p> 
< / div> 
< / div> 
  

以下CSS：

  .jumbotron {
 background-image：url（'piscine.jpg'）; 
 height：300px; 
背景重复：不重复; 
 background-size：cover; 
 border-bottom：1px solid＃ff6a00 
} 
 .jumbotron .container {
 position：relative; 
 top：50px; 
} 
  

我的图片太大而不适合我300px的高度，但我想它可以自动调整大小并适合高度，这样我就可以看到我的全部图像。这一定很简单，但我看不出需要做什么修改。

谢谢

解决方案

如果您希望背景图像适合您的jumbotron的高度，但不在意它是否延伸到整个宽度：

.jumbotron {background-size：auto 100％;如果你想让背景图像覆盖jumbotron的整个高度和宽度，并且不是 关心图像的宽高比：



.jumbotron {background-size：100％100％; }

如果您希望背景图像覆盖整个高度和宽度，关于图像的宽高比：

.jumbotron {background-size：cover; }

如果jumbotron的纵横比与图像的纵横比不同，最后一个选项将会截掉一些图像，但您可以指定图像如何与背景位置属性一起定位：

  .jumbotron {
 / *图像位于容器中心* / 
 background-position：center center; 
 
 / *或容器中心顶部的图片* / 
 background-position：center top; 
 
 / *或容器中心底部的图像* / 
 background-position：center bottom; 
} 
  

I have the following HTML:

<div class="jumbotron">
    <div class="container">
        <h1>Souplesse</h1>
        <p>Be a Good Sport</p>
    </div>
</div>

And the following 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.

Thanks

解决方案

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%; }

If you want the background image to cover the entire height AND width of the jumbotron and you do not care about the image's aspect ratio:

.jumbotron {background-size: 100% 100%; }

If you want the background image to be cover the entire height AND width the jumbotron but you DO care about the image's aspect ratio:

.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;
}

这篇关于如何将100％的图像放入Jumbotron中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！