Div, который вписывается в родителя и поддерживает соотношение сторон - PullRequest
Новая
       10

Div, который вписывается в родителя и поддерживает соотношение сторон

0 голосов
/ 11 мая 2018

У меня есть элемент div, который поддерживает соотношение сторон: он вычисляет его высоту на основе его ширины (используя трюк с отступами). То, что я хотел бы сделать, это поместить это div в другое, подбирая максимально доступное пространство по вертикали и горизонтали, без кадрирования. Я думаю, что самая близкая вещь к тому, что я хочу, это object-fit: contain - то есть только img.

Я хочу, чтобы div покрывал максимально возможную высоту и ширину при сохранении соотношения сторон. Нет вертикальной или горизонтальной культуры.

Возможно ли это только с помощью CSS? Если да, то как?

Обновление: Хорошая статья , где вещи на данный момент.

код (может быть любым другим решением, не обязательно на этом фрагменте): 

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
}

.container:before {
  content: "";
  display: block;
  width: 50%;
  padding-top: 50%;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}
<div class="container">
  <div class="embed">
    this should accommodate all the available space and maintain aspect ratio, no crop when width is too wide
  </div>
</div>

enter image description here

1 Ответ

0 голосов
/ 12 мая 2018

Хорошо, похоже, что это не может быть решено только CSS. Если кому-то интересно, я собрал React компонент , который делает эту работу (Тесты и лучше README скоро, когда у меня будет время).

Он оборачивает своих дочерних элементов в div и использует JavaScript для вычисления ширины и высоты этого div для размещения доступного пространства при сохранении заданного соотношения сторон. Он в основном растягивает обертку, пока одна из сторон не достигнет своего максимума.

BREAKING UPDATE a Было найдено решение только для CSS !

...