Bootstrap4 -- 带有调整大小和填充/拉伸到其 div 中的图像的全屏仪表板？

Question

一直试图让它工作几天，但没有任何运气。

这是专用于更大的显示器 (2560x1080)。所以较低的视口响应并不重要。

我试图：

1. 使容器适合大型全屏边缘到边缘。
2. 创建一个网格（即像附加图像中的那个）
3. 在该网格单元格中显示图像，这些图像恰好使用了它们可用空间的 100%（基于基础单元格/div 的 % 值）——因此调整纵横比，然后拉伸或类似的东西。

不幸的是，每次尝试都是一团糟......最近我使用带有以下额外 css 的 bootstrap 4

https://codepen.io/jpub/pen/qBNbGOV

#mmenu_screen > .row {
    min-height: 100vh;
}
    .flex-fill {
    flex:1 1 auto;
}

任何提示将不胜感激。

它应该是这样的......

Answer 1

不需要引导程序或框架 CSS 网格让您覆盖 ;) 这是一个简单的 API 阅读 CSS，您将了解它是如何工作的，您只需添加所需的 div 然后您给它一个字面上的模板，他会为您安排它们 100%响应（对内容的肯定限制）。

• 控制图像使用背景图像和大小与“背景大小”的百分比;)

希望我有所帮助

 .grid-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: grid; grid-template-areas: 'area1 area1 area1 area1 area4 area4' 'area1 area1 area1 area1 area5 area5' 'area2 area2 area3 area3 area6 area6' 'area2 area2 area3 area3 area7 area7'; grid-gap: 10px; background-color: #f9fad2; padding: 10px; } .grid-container > div { background-color: #18bc9c; text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-area: area1; background-image: url("https://www.bmw.in/content/dam/bmw/marketIN/bmw_in/Images/all-models/BMW%20Series/bmw-2-series/Main%20Banner%20Desktop.jpg/_jcr_content/renditions/cq5dam.resized.img.1680.large.time1601620546255.jpg"); background-size: cover; } .item2 { grid-area: area2; } .item3 { grid-area: area3; } .item4 { grid-area: area4; } .item5 { grid-area: area5; } .item6 { grid-area: area6; } .item7 { grid-area: area7; background-image: url("https://cdn.cnn.com/cnnnext/dam/assets/190815154638-01-bugatti-centodieci-exlarge-169.jpg"); background-repeat: no-repeat; background-size: 100% 100%; }

 <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> </div>