文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使图像占据整个空间？

问如何使图像占据整个空间？
EN

Stack Overflow用户

提问于 2016-07-20 15:24:05

回答 8查看 12.5K关注 0票数 2

我正在制作一个网站，我想在标题中给出一个图像，part.This是我在HTML文件中的代码。

<header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8 col-md-12">
                    <h1>Tourister</h1>
                    <p style="padding:40px"></p>
                    <p>We take inspiration from the World's best 
                        touring experiences, and create a unique experience. You will surely be surprised by our amazing offers and deals we
                        provide throughout the year !
                    </p>
                </div>
            </div>
        </div>
</header>

我在CSS文件中使用了这段代码。

.jumbotron
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;

}

现在的问题是，我的图像并没有像下面的图像那样占据巨型加速器的全部高度和宽度。在这里输入图像描述

我希望它占据整个空间，我用过不同尺寸的图像，但它没有use.None占据整个窗口的空间。因此，任何帮助都是appreciated.Thanks预先提供的。

注:我读过其他的问题，图片没有在堆栈溢出中取下整个宽度，但无法正常工作。

html

css

twitter-bootstrap

回答 8

Stack Overflow用户

回答已采纳

发布于 2016-07-20 15:30:14

注意:我不完全确定您是否希望将类(或可能是ID)应用于标题，而不是较小的div之一。可能取决于你还能做些什么。

.jumbotron 
{
padding: 5px;
margin: 0px auto;
background: #7986cb;
color: floralwhite;     
background-image: url("../img/image6.jpg");
background-repeat: no-repeat;
background-size:100% 100%;
}

看到其他的答案:它也将取决于你的形象的特点和你喜欢什么样的显示。封面= 100% x 100% =包含。见CSS3背景大小属性“尝试-It”。

票数 3

Stack Overflow用户

发布于 2016-07-20 15:29:35

你要找的是background-size。

将此添加到代码中

.jumbotron {
  ...
  background-size: cover; /* Can also be "contain" */
  ...
}

票数 2

Stack Overflow用户

发布于 2016-07-20 15:31:01

您将希望将background-size: cover添加到.jumbotron类的CSS中。这将确保背景图像始终是完整的元素大小，而不失真的高宽比。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38484604

复制

相似问题

问如何使图像占据整个空间？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使图像占据整个空间？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使图像占据整个空间？
EN