填充居中div周圍的剩余寬度和高度

Question

是否可以填充屏幕中心的div周圍的剩余屏幕空間，如下所示：

red div具有以下屬性，因為我希望保持相同的寬高比並將其放在屏幕的中心：

position: absolute;
height: 80%;
width: auto;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

是否可以動態調整4個周圍的div以填充屏幕上的剩余空間？

編輯：紅色div是透明圖像

Answer 1

我對其他解決方案並不同意，因為問題是填充剩余的空間而答案只是提供相等的行，而在第二行中則是相等的列。 所以很明顯，周圍的4個div沒有填補剩余的空間。

我想這就是你需要的：

1. 解決方案有2個周圍的div和偽元素（使用固定的高度/寬度為圖像或只是保持原始大小） ：

 body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .middle:before, .middle:after { content: ""; flex: 1; background: green; } img { opacity:0.6; } 

 <div class="top"> </div> <div class="middle"> <img src="https://lorempixel.com/200/100/"> </div> <div class="bottom"> </div> 

2. 帶有4個周圍div的解決方案（使用圖像的固定高度/寬度或僅保留原始尺寸） ：

 body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .right, .left{ flex: 1; background: green; } img { opacity:0.6; } 

 <div class="top"> </div> <div class="middle"> <div class="left"></div> <img src="https://lorempixel.com/200/100/"> <div class="right"></div> </div> <div class="bottom"> </div> 

3. 沒有周圍div的解決方案，你可以設置％高度 ：

 body { /* 100vw = the width of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vh = the % we specified in the image (40%) but used with vh unit */ --main-start: calc((100vw - ((200 / 100) * 40vh)) / 2); --main-end: calc(var(--main-start) + ((200 / 100) * 40vh)); margin: 0; height: 100vh; display: flex; flex-direction:column; justify-content: center; align-items: center; background:linear-gradient(to right,green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; width:100%; } img { height: 40%; opacity:0.6; } 

 <img src="https://lorempixel.com/200/100/"> 

4. 解決方案沒有包圍你可以設置％寬度的 div：

 body { /* 100vh = the height of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vw = the % we specified in the image (40%) but used with vw unit */ --main-start: calc((100vh - ((100 / 200) * 40vw)) / 2); --main-end: calc(var(--main-start) + ((100 / 200) * 40vw)); margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-image:linear-gradient(green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; height:100%; } img { width: 40%; opacity:0.6; } 

 <img src="https://lorempixel.com/200/100/"> 

UPDATE

由於OP將使用透明圖像並希望保留彩色背景，因此我在最后的2個解決方案中添加了線性背景，以在圖像下方創建透明間隙，因為我沒有使用任何其他元素。

Answer 2

 .container { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .row { display: flex; flex-direction: row; width: 100%; flex: 1; border: 1px solid red; } .box { flex: 1; border: 1px solid green; text-align: center; } 

 <div class="container"> <div class="row"> </div> <div class="row"> <div class="box"> </div> <div class="box"> HERE ! </div> <div class="box"> </div> </div> <div class="row"> </div> </div> 

如何使用display: flex ？

您可以輕松制作響應式布局。