Bootstrap4-全屏仪表板，其图像可以调整大小并填充到div中？

debugcn 发表于 Dev

pub

一直在努力使它工作几天，但没有任何运气。

这专用于较大的显示器（2560x1080）。因此，较低的视口响应能力并不重要。

我试图：

使容器适合大尺寸全屏边缘。
创建一个网格（即像所附图像中的网格一样）
在该网格单元格中显示的图像恰好使用了100％的可用空间（基于基础单元格/ div的百分比值）-因此，请使用宽高比调整大小，然后拉伸或类似操作。

不幸的是，每次尝试都只是一团糟...最近，我在使用Bootstrap 4和以下额外的CSS

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

任何提示将不胜感激。

它应该看起来像这样.......

***示例目标布局图像***

查姆丁·布赞（Chamsddine Bouzaine）

不需要引导程序或框架，也不需要CSS网格；）这是阅读CSS的简单API，您将了解它是如何工作的，只需添加所需的div，然后按字面意义给它一个模板，他会为您安排它们，这是100％响应（对内容的确定性限制）。

要控制图像，请使用背景图像和带有“ background-size”的百分比；）

希望我有所帮助

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。