Как установить высоту изображения равной высоте текста?

Я пытаюсь сделать так, чтобы изображение слева имело ту же высоту, что и текст справа.

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

Можно ли это сделать без JS?

.container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
}
img {
  height: 100%;
}

<div class = "container">
  <div class = "col">
    <img src = "https://via.placeholder.com/150" alt = "" />
  </div>
  <div class = "col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

@cgvoller, вы можете проверить это сами за несколько секунд, скопировав фрагмент и попробовав его. Просто нажмите кнопку.

— 08.11.2022 15:10

html css image

08.11.2022 15:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ну, вы в основном хотите, чтобы оно вело себя как фоновое изображение, и это то, что вы должны сделать, но если вы не можете по какой-то причине, присвойте изображению абсолютную позицию и задайте относительное положение контейнера, и это должно решить вашу проблему, вы также можете изменить поведение изображения с object-fit и т. д.

.container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  position:relative;
}
img {
  height: 100%;
  position:absolute;
}

<div class = "container">
  <div class = "col">
    <img src = "https://via.placeholder.com/150" alt = "" />
  </div>
  <div class = "col">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

Спасибо! Сделать его фоновым изображением было невозможно (хотя я этого не указывал; моя вина), но эта альтернатива работает.

— 08.11.2022 19:38

08.11.2022 15:16