Как растянуть изображение при помощи css

Для того, чтобы растянуть изображение на всю ширину страницы при помощи css нужно прописать его класс либо id и задать ширину width на сто процентов. Но прежде всего нужно позаботиться о том, чтобы сама картинка подходила для того, чтобы её можно растянуть. Для этого может подойти просто квадрат или прямоугольник одного цвета серого, красного, синего и так далее. В зависимости от дизайна самого сайта. 

Итак, как мы уже сказали ранее нужно задать класс для тега img, вашего изображения. Выглядеть это будет вот так:

<img class=”pic_img” src=”vashakartina.jpg”>

Код css для того, чтобы растянуть изображение следующий:

img.pic_img { width:100%; border:none; }

Растягивать небольшую фотографию на всю ширину экрана не имеет смысла. Согласитесь, это выглядело бы довольно, не привлекательно. Посетители сайта вас не поймут. И для чего это?
 

Другое дело если вы хотите растянуть фоновое изображение. Но там, обычно берут небольшое изображение и дублируют по оси X и Y.

То есть фоновое изображение это по сути небольшая картинка, которая повторяется по ширине и по всей высоте экрана. 

Добавить комментарий


( ! ) Ф.И.О.
( ! ) Текст сообщения: (Не больше 5000 знаков)

( ! )Введите текст с картинки :
Обновить код
Положительный отзыв Положительный отзыв
Отрицательный отзыв Отрицательный отзыв



Коллекция скриптов и модулей   © 2017