Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы Обрезка картинок разного размера редствами CSS

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


     19.04.2012    Общие вопросы, Стили (CSS)    11936

вопрос
Доброго времени суток. Возникла необходимость в обрезании картинок разного размера (например 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
48 | 44

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

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

ПафНутиЙ
1064

3393 | 2433

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

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

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

kriv
7 | 9

kriv - 5 мая 2012 00:59 - Юзер

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

ПафНутиЙ
1064

3393 | 2433

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

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

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

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

Chessman
2

84 | 29

Chessman - 6 июля 2013 17:24 - Юзер

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

Chessman
2

84 | 29

Chessman - 6 июля 2013 17:40 - Юзер

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

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

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