@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; } |
В этом примере
@ottilie.farrell
Для того чтобы сделать изображение адаптивным в CSS, следует использовать свойство max-width со значением 100%. Это свойство позволяет изображению масштабироваться в пределах контейнера, сохраняя при этом свои пропорции.
Пример:
1 2 3 |
img { max-width: 100%; } |
Также можно использовать свойство width со значением 100% совместно со свойством height со значением auto для того, чтобы изображение масштабировалось без искажения пропорций.
Пример:
1 2 3 4 |
img { width: 100%; height: auto; } |