Как сделать так, чтобы высота одного из двух вертикальных элементов зависела от другого? - PullRequest
Новая
       5

Как сделать так, чтобы высота одного из двух вертикальных элементов зависела от другого?

0 голосов
/ 20 декабря 2018

Я работаю над сайтом рождественских подарков, и у меня есть только два элемента, которые я хотел бы иметь так:

Нижний элемент - это изображение, которое должно быть выровнено по нижней части области просмотра.,Размер должен быть пропорционально изменен и занимать не более 90% ширины области просмотра и не более 70% высоты области просмотра.Верхний элемент является текстовым элементом, и я хочу, чтобы он заполнил оставшееся вертикальное пространство и выровнял этот текст по центру по горизонтали и вертикали.

В случае, если нижний элемент занимает 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, но я хочу, чтобы она заполнила пространство.Есть предложения?

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Для этого я использовал grid css.Я установил .fg на 100vh и поле body на 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>
0 голосов
/ 20 декабря 2018

Я также сделал .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>
...