Question

我正在一个圣诞节礼物网站上工作，其中只有两个元素，我希望这样：

底部元素是图像，应与视口底部对齐。应按比例调整大小，并占用最大90％的视口宽度和最大70％的视口高度。上面的元素是一个text元素，我希望它填充剩余的垂直空间并使该文本在水平和垂直方向上与中心对齐。

在这种情况下，如果底部元素耗时70vh，则解决方法很简单，上部元素应耗时30vh。但是，如果底部元素较小，则上部框的高度应为（视口高度-上部元素高度）。

这是我到目前为止所拥有的。

body { 
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
}

.fg {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
}

.fg div {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 30%;
}

.fg span {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-height: 70%;
    max-width: 90%;
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div>
        <span>Happy new year!</span>
      </div>
      <img src="https://i.imgur.com/Ql8A585.png"/>
    </div>
  </body>
</html>

对于底部元素高度= 70vh（例如对于1920 x 1080分辨率）来说，效果很好。但是，如果我将其翻转，即切换到1080 x 1920，上方的框仅需30vh，但我希望它填充空间。有什么建议吗？

Answer 1

我也使.fg成为了一个flexbox，它摆脱了绝对定位图像的需要。我将图像包裹在div中，以便当div由于flex-grow: 1;

而扩大时，在保留宽高比的同时进行缩放

body { 
    margin: 0;
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
    font-size: 0;
}

* {
    box-sizing: border-box;
}

.fg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.fg .text {
    display: flex;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

.fg span {
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg .img {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    max-height: 70%;
    max-width: 90%;
}

@media (orientation: landscape) {
    img {
        height: 100%;
    }
}

@media (orientation: portrait) {
    img {
        width: 100%;
    }
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div class="text">
        <span>Happy new year!</span>
      </div>
      <div class="img">
          <img src="https://i.imgur.com/Ql8A585.png" />
      </div>
    </div>
  </body>
</html>

Answer 2

我为此使用了网格CSS。为了避免溢出问题，我将.fg设置为100vh，将身体裕度设置为0。因为您需要上部来响应img的大小，所以我将网格行设置为：grid-template-rows: 1fr auto;，这意味着网格的上半部分占用了剩余空间。还将图像位置更改为相对，以使其与网格一起使用。

body { 
    background-image: url('https://i.imgur.com/sWfZ8nq.png');
    background-repeat: repeat;
    margin: 0;
}

.fg {
    display: grid;
    grid-template-rows: 1fr auto;
    margin: auto;
    height: 100vh;
}

.fg div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.fg span {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 10vmin;
    letter-spacing: 3px;
    text-shadow:  2px  2px 2px green,
                  2px -2px 2px green,
                 -2px  2px 2px green,
                 -2px -2px 2px green;
}

.fg img {
	position: relative;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	max-height: 70vh;
	max-width: 90vw;
}

<html>
  <head>
    <title>HNY</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="fg">
      <div>
        <span>Happy new year!</span>
      </div>
      <img src="https://i.imgur.com/Ql8A585.png"/>
    </div>
  </body>
</html>

如何让两个垂直元素之一的高度取决于另一个？

2 个答案: