是否可以填充屏幕中心div
周围的剩余屏幕空间,如下所示:
红色div
具有以下属性,因为我希望保持相同的宽高比并将其置于屏幕中央:
position: absolute;
height: 80%;
width: auto;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
是否可以动态调整4个周围的div以填充屏幕上的剩余空间?
编辑:红色div
是透明图像
答案 0 :(得分:2)
我不同意other solution,因为问题是填充剩余的空格而答案只是提供相等的行,而在第二行中则是相等的列。所以很清楚,周围的4个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>
&#13;
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;
}
&#13;
<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>
&#13;
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;
}
&#13;
<img src="https://lorempixel.com/200/100/">
&#13;
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;
}
&#13;
<img src="https://lorempixel.com/200/100/">
&#13;
<强>更新强>
由于OP将使用透明图像并希望保留彩色背景,因此我在最后的2个解决方案中添加了线性背景,以在图像下方创建透明间隙,因为我没有使用任何其他元素。
答案 1 :(得分:1)
.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;
}
&#13;
<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>
&#13;
如何使用display: flex
?
您可以轻松制作响应式布局。