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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

.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>

Answer 3

Вариант через 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>

БЛОГ НА HUSL

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

Ответы (3 шт):