Как через CSS задать размер изображения

В прошлый раз мы рассмотрели вариант вывода изображений из папки на PHP.

Из рассмотренного примера мы поняли что изображение выводится на страницу при помощи HTML тегов <img weight=”300px” src=”picture.jpg”>.
А размеры картинки мы прописали прямо в HTML коде.

Сейчас покажу как задать размеры изображения при помощи таблицы стилей. Все эти данные поместим в отдельный файл с расширением css и назовем его для примера style.css.

Размеры изображения задаются параметрами weight и height.
Для того, чтобы задать размеры для изображения и прописать его через файл CSS нужно создать класс для тега src. Для примера пропишем class=”image”

Тогда в файле css размеры будут записаны таким образом

img.image { weight: 300px; height: 170px; border: none; }

При таком варианте записи, если реальная высота изображения будет больше 170 пикселей, например, 400 пикселей то на странице будет показано искаженное изображение. Оно будет сплющено.
 

Для того, чтобы избежать этого можно задать только один параметр, ширину изображения, высота по умолчанию будет выставлено, автоматически не нарушая пропорции изображения:

img.image { weight: 300px; border: none; }

Таким же образом можно задать высоту height, тогда ширина будет установлена автоматически сохраняя пропорции изображения.

Если мы хотим видеть реальные размеры изображения, тогда прописывать размеры картинки в файле не обязательно. Только если мы примерно знаем, что размер изображения занимает всю страницу, то на странице не должно быть никаких тегов задающих размер.
 

Например, таблица <table> или блок див <div> у которых уже задан размер. Тогда размер картинки, который находится внутри таблицы или блока div будет такой же как у таблицы или блока div.

Если мы хотим, чтобы картинка занимала всю ширину страницы браузера или всю ширину столбца сайта, тогда ширину надо прописать в процентах.

Вот таким образом:

img.image { weight: 100%; border: none; }
 

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

Для веб-дизайнеров является плохим тоном если стили приписываются в формате HTML. В шаблоне прописываются только классы и id для каждого элемента. А все стили выносятся в отдельный файл css. 

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


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

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



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