Bootstrap 4——全屏仪表板,其中包含可调整大小并 fill/stretch 到其 div 中的图像?
Bootstrap4 -- fullscreen dashboard with images that resize and fill/stretch into their divs?
这几天一直在尝试让它工作,但没有任何运气。
这是专用于更大的显示器 (2560x1080)..所以较低的视口响应并不重要。
我正在尝试:
- 使容器适合大全屏边到边。
- 创建一个网格(即像附图中的那样)
- 在该网格单元格中显示完全使用 100% 可用 space 的图像(基于基础 cell/div 的百分比值)——因此调整纵横比大小,然后拉伸或类似的东西。
不幸的是,每次尝试都是一团糟...最近我使用 bootstrap 4 和以下额外的 css
https://codepen.io/jpub/pen/qBNbGOV
#mmenu_screen > .row {
min-height: 100vh;
}
.flex-fill {
flex:1 1 auto;
}
如有任何提示,我们将不胜感激。
应该是这样的......
不需要 bootstrap 或框架 CSS 网格可以满足您的需求 ;) 这是一个简单的 API 阅读 CSS 您将了解它是如何工作的添加需要的 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>
这几天一直在尝试让它工作,但没有任何运气。
这是专用于更大的显示器 (2560x1080)..所以较低的视口响应并不重要。
我正在尝试:
- 使容器适合大全屏边到边。
- 创建一个网格(即像附图中的那样)
- 在该网格单元格中显示完全使用 100% 可用 space 的图像(基于基础 cell/div 的百分比值)——因此调整纵横比大小,然后拉伸或类似的东西。
不幸的是,每次尝试都是一团糟...最近我使用 bootstrap 4 和以下额外的 css
https://codepen.io/jpub/pen/qBNbGOV
#mmenu_screen > .row {
min-height: 100vh;
}
.flex-fill {
flex:1 1 auto;
}
如有任何提示,我们将不胜感激。
应该是这样的......
不需要 bootstrap 或框架 CSS 网格可以满足您的需求 ;) 这是一个简单的 API 阅读 CSS 您将了解它是如何工作的添加需要的 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>