Ограничить максимальную высоту изображения, которая зависит от высоты его брата - PullRequest
0 голосов
/ 28 ноября 2018

Как я могу ограничить максимальную высоту изображения, чтобы оно было таким же, как высота его брата, независимо от размера экрана.

Результат, который является приемлемым => Та же высота - √

Результат, который неприемлем, поскольку высота столбца изображения превышает его родную = = (DIV - .main-content). Недопустимый - X

PS. В этом случае свойство фона не подходит.

.container {
  display: flex;
  height: 100%;
}

.container>div {
  flex: 1;
}

.main-content {
  background: pink;
  padding: 20px;
}

.sidebar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="main-content">
    Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
    ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
  </div>
  <div class="sidebar">
    <img src="https://placeimg.com/640/490/nature">
  </div>
</div>

1 Ответ

0 голосов
/ 28 ноября 2018

Хорошо, похоже, я мог бы найти решение.Одним из способов является позиционирование изображения как абсолютного и «растягивание», в то время как подгонка объекта все еще сохраняет его свойство cover.Если у кого-то есть лучшее решение, не стесняйтесь поделиться.

.container {
  display: flex;
  height: 100%;
=
}

.container > div {
  flex: 1;
}

.main-content {
  background: pink;
  padding: 20px;
}

.sidebar img {
  object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  height: 100%;
  width: 100%;
}

.sidebar {
  position: relative;
}
<div class="container">
  <div class="main-content">
    Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.

Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
  </div>
  <div class="sidebar">
    <div><img src="https://placeimg.com/640/1000/nature"></div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...