Как заставить картинку занять все доступное пространство, при этом не увеличивая высоту родителя

Рейтинг: 1Ответов: 3Опубликовано: 03.02.2023

Помогите разобраться с картинкой.

Есть блок, в котором должна быть картинка. Блок не имеет фиксированную высоту, и в моем случае он не может иметь фиксированную высоту.

Как вписать в этот блок картинку, чтобы она не увеличивала его высоту, а подстраивалась адаптивно, под его текущую высоту.

Вот тут(codesandbox) пример, я вставил картинку, и она заняла все пространство, создавая при этом скролл, и увеличивая родителя.

Возможно ли вообще это сделать, или нужно обязательно строго ограничивать высоту?

В примере, между header и footer есть пространство. Как мне заполнить все это пространство блоком картинкой? Даже если высота окна будет меняться, высота картинки должна будет подстроится(только высота. Ширина может быть любой, не нулевой.)

css img
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вариант через background и flex-grow.

    .App {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      box-sizing: border-box;
    }
    
    .header {
      font-size: 24px;
      font-weight: 500;
      padding: 16px;
      border: 2px solid black;
      display: flex;
    }
    
    .img-wrapper {
      display: flex;
      flex-grow: 1;
      background-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80');
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    .footer {
      margin-top: auto;
      font-size: 24px;
      font-weight: 500;
      padding: 16px;
      border: 2px solid black;
    }

    <div className="App">
      <div className={"header"}>
        <span>Header</span>
      </div>
      <div className={"img-wrapper"}/>
      <div className={"footer"}>
        <span>Footer</span>
      </div>
    </div>
▲ 1

Вы что-то типо этого хотели получить?

.App {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  font-size: 24px;
  font-weight: 500;
  padding: 16px;
  border: 2px solid black;
}

.img-wrapper {
  position: relative;
}
p {
  position: relative;
  z-index: 20;
}
.img-wrapper-innder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
  margin-top: auto;
  font-size: 24px;
  font-weight: 500;
  padding: 16px;
  border: 2px solid black;
}
<div class="App">
  <div class="header">
    <span>Header</span>
  </div>
  <div class="img-wrapper">
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    <div class="img-wrapper-innder">
      <img class="img" src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&amp;w=1000&amp;q=80" alt="road">
  </div>
  </div>
  <div class="footer">
    <span>Footer</span>
  </div>
</div>

▲ 0

Высота блока (родителя), в который вы вставляете картинку (дочерний элемент), будет равна высоте картинки (дочернего элемента).

Можно уменьшить скролл на странице, задав для картинки свойство max-width: 100%;

Если в вашем случае нельзя задавать фиксированную высоту для картинки, то лучше подобрать картинку с другими пропорциями (16:9).