Question

我一直在制作网站，我希望在屏幕上找到一张开场图片。问题是我有我想要使用的图片，但它对于我希望它适合的空间来说很大。这可以通过两种方式解决：我可以缩放图像以适应Div或我可以定位图像div内部显示我的图片的基本部分。理想情况下，我想要第二个选项，但我对第一个选项没问题。我相信我已经对这个问题做了充分的研究，这个问题不像这些：First，Second。我也在这个问题上做了我自己的实验，但是使用position属性和清除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;
}

我使用的图像不归我所有。我意识到这是非法的。我不打算把这个网页用于一般用途，所以如果我使用这个图像我们就可以了。非常感谢您的所有帮助。

Answer 1

尝试background-size: cover;或background-size: contain;或其他一些值。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

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

Answer 3

background-size: cover;

在调整浏览器大小时，只显示部分图片。

background-size: 100% 100%;

将自动调整浏览器上的图片大小，以便整个图像始终可见。

Answer 4

我会用CSS自己缩小它，但是如果你只是显示一部分图像，那你为什么不裁剪它？您将获得您正在寻找的影响，并且您的资产规模将会减少。

CSS图像定位在<div> </div>中

4 个答案: