Установка максимальных размеров картинок и блоков в CSS

Ни один сайт ни обходится без графических вставок: картинок. Фотографий и прочего клипарта. Порой все картинки разного размера и при добавлении на сайт это смотрится убого. Какие-то из них просто громадные и их надо уменьшить, а какие-то, наоборот – увеличить до необходимых параметров.

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

Таким образом к нам на помощь приходит CSS.

Можно ограничть ширину для всех изображений сразу путём добавления  в style.css определенного когда.

Например,

.img

{

Width: 400px;

Height:auto;

}

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

И всё бы ничего, но получается, что у нас увеличиваются миниатюры и смайлы. Если у Вас их на сайте нет, то данный вариант Вам подходит.

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

.img

{

width:auto;

height:auto;

max-width:400px!important;

max-height:400px!important;

}

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

Данный код применим не только к картинкам, но и к любым другим блокам в структуре сайта

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Хостинг ХостиЯ


Меню