Как установить максимальную высоту изображения на высоту родительского div в правилах CSS?

Мне нужно, чтобы высота изображения была ограничена родительской высотой div, содержащей текст. Есть ли способ сделать это в CSS?

У меня есть следующее:

img {
  float: right;
  max-width: 500px;
  max-height: inherit;
}

<div>
  <img src = "https://images.freeimages.com/images/large-previews/e51/tokyo05-2-1447803.jpg" />
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
</div>

html css image height

16.03.2019 09:58

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

764

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

Ответы 2

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

Абсолютное позиционирование — одно из решений

img {
  position: absolute;
  right: 0;
  max-width: 500px;
  max-height: 100%;
}
div {
  position: relative;
}

16.03.2019 10:08

Я бы использовал изображение в качестве фона

.box {
  background:url("https://images.freeimages.com/images/large-previews/e51/tokyo05-2-1447803.jpg") right/auto 100% no-repeat;
}

<div class = "box">
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
</div>

16.03.2019 10:10

Другие вопросы по теме

Хотите показать определенный div при нажатии в html

Кипарис: селектор css для выбора якоря по тексту

Почему Djangoforms.TextField занимает так много места, даже если область ввода текста мала?

Почему цвет текста Колбаса красный?

CSS - Как сохранить цвет при наведении под их подменю?

Установите дочерний элемент с абсолютным позиционированием на 100% ширины родителя, включая границу

Как я могу использовать анимацию справа для меню боковой панели в режиме просмотра телефона?

Как я могу сделать текст наложения Hover фиксированным на изображении

Переключение CSS панели навигации при прокрутке вниз

Панель навигации Samsung Galaxy S8 перекрывает div с фиксированной позицией

Как установить максимальную высоту изображения на высоту родительского div в правилах CSS?

Ответы 2

Другие вопросы по теме

Похожие вопросы