Question

我想要在一个超大屏幕中显示一个图像。图像不适合100％的jumbotron。它被剪裁了。如何使图像在jumbotron中100％适合

HTML

<div class="container-fluid myphoto-section bg-myphoto-dark">
        <div class="container">
            <div class="jumbotron jumbotron-welcome">
                <h1>Welcome to MyPhoto</h1>
                <p>Photos you can cherish!</p>

            </div>  
        </div>
    </div>

CSS

.myphoto-section {
    min-height:500px;
}

.bg-myphoto-dark {
    background-color: #504747;
    color:white;
}

.bg-myphoto-light {
    background-color: white;
    color: #504747;
}

.jumbotron-welcome {
    background-image: url('../images/fathersday1.jpg');
    background-size: cover;
    color:white;
}

我尝试使用的代码虽然有效，但jumbotron的尺寸与图像的尺寸不成比例调整。

 <div class="container-fluid myphoto-section bg-myphoto-dark">
        <div class="container">
            <div class="jumbotron ">
                <img src="images/fathersday1.jpg" class="img-fluid">
                <h1>Welcome to MyPhoto</h1>
                <p>Photos you can cherish!</p>

            </div>  
        </div>
    </div>

有没有办法以编程方式将图像调整到jumbotron的大小，或者我是否需要创建与jumbotron相同大小的图像。

Answer 1

添加此CSS：

.jumbotron-welcome{
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

这应该使图像占据jumbotron的整个宽度和高度。

如何使图像适合超大尺寸的大小

1 个答案: