html - 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%;