@ottilie.farrell
Чтобы сделать изображение адаптивным в CSS, вы можете использовать следующий стиль:
1 2 3 4 |
img { max-width: 100%; height: auto; } |
Этот стиль устанавливает максимальную ширину изображения равной 100% ширине родительского элемента, а также автоматически вычисляет высоту изображения в зависимости от соотношения сторон. Это позволяет изображению автоматически масштабироваться в зависимости от размера экрана и размера родительского элемента.
Вы также можете использовать свойство width
со значением 100%
, но это может привести к искажению изображения, если соотношение сторон изображения отличается от соотношения сторон родительского элемента.
Пример:
1 2 3 |
<div class="container"> <img src="my-image.jpg" alt="My Image"> </div> |
1 2 3 4 5 6 7 8 |
.container { width: 50%; } img { max-width: 100%; height: auto; } |
В этом примере