填充居中div周围的剩余宽度和高度 [英] Filling remaining width and height around centered div

问题描述

是否可以像这样在屏幕中央居中填充 div 周围的剩余屏幕空间:

Is it possible to fill the remaining screen space around a div that is centered on the screen like so:

红色 div 具有以下属性，因为我想保持相同的宽高比并将其放置在屏幕中央:

The red div has the following properties as I would like to keep the same aspect ratio and have it in the center of the screen:

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

是否可以动态调整周围的4个div以填充屏幕上的剩余空间?

Is it possible to adjust the 4 surrounding divs dynamically to fill the remaining space on the screen?

红色 div 是透明图像

推荐答案

我不同意其他解决方案问题是填充剩余的空间，答案简单地提供了相等的行，而在第二行中则提供了相等的列.因此很明显，周围的4个div并没有填充剩余的空间.

I don't agree a lot with the other solution as the question was to fill remaining spaces and the answer simply provided equal rows and in the second row equal columns. So it's clear that the 4 surrounding divs are not filling the remaining space.

我认为这是您所需要的:

I think this is what you need:

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>

1. 周围有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>

1. 没有周围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/">

1. 没有周围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/">

更新

由于OP将使用透明图像并希望保留彩色背景，因此我在最后两个解决方案中添加了线性背景，以在图像下方创建透明间隙，因为我没有使用任何其他元素.

Since the OP will use transparent image and want the colored background to stay, I added in the 2 last solutions linear-background to create a transparent gap below the image since i didn't use any other elements.

这篇关于填充居中div周围的剩余宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！