Ни один сайт ни обходится без графических вставок: картинок. Фотографий и прочего клипарта. Порой все картинки разного размера и при добавлении на сайт это смотрится убого. Какие-то из них просто громадные и их надо уменьшить, а какие-то, наоборот – увеличить до необходимых параметров.
Конечно можно картинки обработать заранее, например в фотошопе, сделать определённую ширину и высоту и потом уже загружать на сайт, или же потом отредактировать их непосредственно на сайте путём добавления к ним или изменения атрибутов 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;
}
Таким образом у нас получается задать максимальную ширину и высоту для картинок. Говоря проще – больше размером изображения быть не могут, а вот меньше — пожалуйста.
Данный код применим не только к картинкам, но и к любым другим блокам в структуре сайта
