Адаптивная картинка CSS

Задать ширину изображения можно двумя способами, с помощью CSS и с помощью атрибута width элемента . Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки. В некоторых случаях можно задать высоту, либо задать параметр auto. Чтобы изображение было адаптивным желательно задавать ширину в процентах.

В данном примере ширина картинки указана в пикселях, на Рис. 1 добавлен атрибут width, на Рис. 2 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 1

Рис. 2

HTML


<img src="image.jpg" alt="" width="450px"/> <!-- Рис. 1 -->
<img src="image.jpg" alt="" class="image-width-px"/> <!-- Рис. 2 -->

CSS


.image-width-px{
    width: 450px; /* Рис. 2 */
}

В данном примере ширина картинки указана в процентах, на Рис. 3 добавлен атрибут width, на Рис. 4 картинке присвоен класс и ширина задана с помощью CSS.

Пример

Рис. 3

Рис. 4

HTML


<img src="image.jpg" alt="" width="100%"/> <!-- Рис. 3 -->
<img src="image.jpg" alt="" class="image-width"/> <!-- Рис. 4 -->

CSS


.image-width{
    width: 100%; /* Рис. 4 */
}