Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Обрезка картинок разного размера редствами CSS

Обрезка картинок разного размера редствами CSS


     19.04.2012    картинка, css    Общие вопросы, Стили (CSS)    12999

вопрос
Доброго времени суток. Возникла необходимость в обрезании картинок разного размера (например 580х350 и 290х420) до того который нужно получить в итоге (например что бы все картинки были 150х200). Помню видел в просторах интернета как то способ как можно сделать это при помощи css но увы найти не могу сейчас. Если кто может в этом помочь буду очень благодарен.

Ответил: ПафНутиЙ


C помошью CSS можно пропорционально уменьшить и "спрятать выступающие излишки"
<div class="img_wrap">
<img src="img.png" alt="" />
</div>

CSS:
.img_wrap {
    width: 150px;
    height: 200px;
    overflow: hidden;  
    line-height: 185px;
    text-align: center;
    }  
    .img_wrap img {
        max-height: 200px;
        max-width: 150px;
        vertical-align: middle;
        }

Таким образом картинка всегда будет по центру вертикально и горизонтально.
Можно ещё убрать max-height: 200px; или max-width: 150px; в зависимости от потребнстей.
Но надо иметь в виду, что в IE7 придётся испоьзовать костыли, коих куча всяких.

6 комментариев

sk
Юзер

sk - 22 апреля 2012 11:21 -

Пафнутий, а рамку-бордер прописывать в .img_wrap?

ПафНутиЙ
Админ

ПафНутиЙ - 22 апреля 2012 12:34 -

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

Каков вопрос - таков и ответ. Просто помните об этом.

kriv
Юзер

kriv - 5 мая 2012 00:59 -

Еще как вариант можно вместо свойства overflow можно использовать свойство clip

ПафНутиЙ
Админ

ПафНутиЙ - 5 мая 2012 09:24 -

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

так что не вариант) слишком геморно. Да и проще тупо ограничить размеры блока, а картинку прописать как фон - тогда вообще проблем не будет, и картинки труднее содрать))))

Каков вопрос - таков и ответ. Просто помните об этом.

Chessman
Юзер

Chessman - 6 июля 2013 17:24 -

а если картинка из полной новости?

Chessman
Юзер

Chessman - 6 июля 2013 17:40 -

или статической страницы

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх