Размер изображения в css

Для того чтобы вывести картинку на страницу сайта желательно задать размеры выводимого изображения. Иначе картинка, если изначально размеры его не заданы, может не совсем корректно показана на странице. Например, если вы просто выгрузите фотографии из обычного цифрового фотоаппарата, то картинка может просто уйти за пределы видимости браузера. Потому что стандартный размер фотографии по ширине может быть более двух тысяч пикселей.

Для того чтобы задать размеры изображения в языке CSS вам понадобится файл стилей style.css, где вы можете прописать стили для каждого конкретного изображения. Хотя если все изображения одинаковые можно прописать стили для всех картинок.
 

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

Итак, берем любую фотографию, например foto.jpg размерами 2200 на 1500 пикселей. Для вывода картинки пропишем для него обычный html код:

<img src=”foto.jpg”>

Для того, чтобы прописать все параметры для этого изображения можно конечно все прописать при помощи html.
Тогда код для картинки будет такой :

<img src=”foto.jpg” width=”500px” height=”300”>
 

 

Параметры px(пиксели) можно не указывать поскольку 90% всех

установленных браузеров по умолчани, все размеры считают в пикселах. 

Но такой код громоздкий и к тому же приписывать к каждой картинке ширину и высоту очень неудобно. Проще указаать к каждой картинке класс и название класса. Например, class=”images”. Тогда код для вывода изображения будет следующий:

<img src=”foto.jpg” class=”images”> 

А все параметры ширину, высоту, толщину рамки и так далее мы вынесем в отдельный файл style.css. Откроем файл style.css в специальном редакторе и пропишем стили для класса images:

img.images { width:500px; height:300px; border:0; padding-left:10px; padding-right:10px; }
 

Таким образом, можно задать размеры изображения при помощи CSS для всех изображений на странице.

А если необходимо можно прописать несколько стилей для разных групп изображений. Например, для фотогалереи задают стили для превью – уменьшенные копии изображений и стили для увеличенных детальных изображений. Или для вывода новостей: там также в анонсе новостей выводят небольшое изображение. А при переходе на страницу самой новости выводят большую картинку.
 

Кроме того можно использовать селектор id. Используют селектор id для стилей точно так же как class. Так же пропишем стили при помощи селектора id=”images”. И тогда наш код уже примет немного другой вид для файла стилей:

img#images { width:500px; height:300px; border:0; padding-left:10px; padding-right:10px; }

А зачем использовать классы и селекторы id, если прописываем одинаковые стили?

Я тоже задумывался над этим вопросом, пока не углубился в более сложное программирование. В дальнейшем селекторы id для многих элементов на странице понадобится для взаимодействия с javascript, а еще лучше JQuery.

JQuery классная вещь! Намного проще javascript. Код гораздо короче, а функциональность в разы больше. А это для начинающих веб-программистов очень большой плюс. Об этом поговорим чуть позже.
 

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


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

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



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