Bootstrap使图像在容器中全宽

Question

我正在尝试制作全角background-image而不是img标签。但是它必须流出容器。我可以像100%

那样充实吗

这里是JSFiddle

尝试这样：

.long {
    background-image: url("https://via.placeholder.com/400x400");
    height: 400px;
    width: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-6">
            <div class="long"></div>
        </div>
   </div>
</div>

Answer 1

您可以使用以下代码，它将完美运行

.long {
background-image: url("https://via.placeholder.com/400x400");
height: 400px;
width: 100%;

}

Answer 2

您可以在此处添加CSS博客：

  

背景大小：100％自动；

反之，如果不需要，则仅复制中心和封面，然后使用

  

background-size：封面；   背景位置：居中居中；

也许可以解决您的问题。

.long {
    background-image: url("https://via.placeholder.com/400x400");
    height: 400px;
    width: 100vh;
    background-size: 100% auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-3">
            <img class="img-fluid" src="https://via.placeholder.com/400x400" alt="">
        </div>
        <div class="col-6">
            <div class="long"></div>
        </div>
   </div>
</div>