CSS图片在<div>中的定位

Question

我在制作一个网站，想要在屏幕上展示一张开场图片。问题是我已经有了需要使用的图片，但它太大了，不适合我想放置的空间。这个问题可以通过以下两种方法解决：我可以缩放图片以适应Div，或者我可以将图片放置在Div内，展示我的图片的重要部分。理想情况下，我想选择第二种选项，但我也可以接受第一种。我相信我对这个问题进行了足够的研究，这个问题不像这些：第一个，第二个。我也做了自己的实验，使用了位置属性和清除div，但这些并没有令我满意。

以下是我认为与此问题有关的基本代码：

HTML:

<div class="jumbotron">
    <h1> New IQ Test </h1>
    <p>Take our quiz</p>
</div>

CSS：

.jumbotron {
    /*padding-left: 50px;
    padding-right: 10px;*/
    height: 500px;
    display:block;
    background-image: url(http://bit.ly/1IMUMR0);
    width: 100%;
    /*padding-top: 100px;
    position: absolute;
    bottom: -30px;*/
    text-align: center;
    color:white;
}

.jumbotron h1 {
    padding-top: 150px;
    font-weight: normal;
    opacity: 100;
    text-shadow: 0 0 10px black;
    font-family: Helvetica;
}

我使用的图片不属于我。我意识到这���非法的。如果我不会将此网页用于一般用途，则可以使用此图像。非常感谢您的帮助。

- user4585315

Answer 1

.jumbotron {
/*padding-left: 50px;
padding-right: 10px;*/
background-size: 100% 100%;
/*background-size: cover;*/
height: 500px;
display:block;
background-image: url(http://bit.ly/1IMUMR0);
width: 100%;
/*padding-top: 100px;
position: absolute;
bottom: -30px;*/
text-align: center;
color:white;

- jberk

Answer 2

尝试使用background-size: cover;或background-size: contain;或其他一些值。更多信息请参考https://developer.mozilla.org/en-US/docs/Web/CSS/background-size。

- posit labs

Answer 3

我个人会使用CSS将其缩小，但如果您只想显示图像的一部分，为什么不裁剪它呢？这样您就可以获得所需的效果，并且资产大小也会减小。

- John

Answer 4

background-size: cover;

当您调整浏览器大小时，只会显示图像的一部分。

background-size: 100% 100%;

将在浏览器调整大小时自动调整图像大小，以便始终显示完整的图像。

- Daniel Williams