Обрезка картинок без изменения пропорций на CSS

Верстка

Рисунок Обрезка картинок без изменения пропорций на CSS
Обрезка картинок без изменения пропорций на CSS Обрезка картинок без изменения пропорций на CSS
оценка: 4.3 из 5
оценок: 25

Часто появляется необходимость выводить изображения в блок фиксированного размера. В данном случае появляется проблема: как вписать картинку в блок без потери пропорции.

В большинстве блогов рекомендуют писать JavaScript код, который будет вычислять размеры картинки и масштабировать ее в нужный размер. Но это не наш метод. Привязка к js-коду не является хорошей идеей. К тому же до полной загрузки картинок скрипт будет бездействовать. Соответственно, страница некоторое время будет кривой.

Конечно, можно обрезать и масштабировать картинки до добавления их на сайт. но каждый раз запускать редактор и обрезать картинку по пикселям тоже не есть хорошо. Поэтому предлагаю воспользоваться привычным CSS, и обрезать картинку при помощи него. В данном случае, обрезка будет происходить по вертикали. То есть, по ширине картинка будет влезать полностью, а по высоте обрезаться.

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

Для начала, подберем пациентов. Я вбрал картинки трех животных из семейства кошачих разных пропорций. Ширина у всех картинок одна - 200 пикселей.

Картинка 1
высота = 198px

Картинка 2
высота = 257px

Картинка 3
высота = 124px

При такой разности пропорций картинок лучшим вариантом будет взять обрамляющий блок размером 200x120 пикселей.

После всех манипуляций с CSS выглядеть это будет так:

Картинка 1 Картинка 2 Картинка 3

Код данного примера такой:

Code
<style type="text/css">
  .imgPicture {
    display: inline-block;
    width: 200px;
    height: 120px;
    overflow: hidden;
    border: 5px solid #FFFFFF;
    background: #FFFFFF;
    outline: 1px solid #CCCCCC;
    margin: 10px;
  }
  .imgPicture img {
    width: 200px;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>

<span class="imgPicture">
  <img src="http://szenprogs.ru/_bl/1/52061561.jpg" width="200" alt="Картинка 1" border="0">
</span>

<span class="imgPicture">
  <img src="http://szenprogs.ru/_bl/1/84740535.jpg" width="200" alt="Картинка 2" border="0">
</span>

<span class="imgPicture">
  <img src="http://szenprogs.ru/_bl/1/01259736.jpg" width="200" alt="Картинка 3" border="0">
</span>

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

На этом все. Подписывайтесь, ставьте звездочки! Удачи в свершениях!

Не по теме. Самое-самое что есть на Земле.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Обрезка картинок без изменения пропорций на CSS
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:19258
Рейтинг:4.3/25
Дата добавления:2012-12-28 17:24, Пятница
Добавил:Szen
Теги:css трюк, масштабирование картинок, картинки, размер картинок, Пропорция

Мини-форум

№ 02012-12-28 17:24
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Обрезка картинок без изменения пропорций на CSS".
Гость
Учавствовать в обсуждении "Обрезка картинок без изменения пропорций на CSS" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Во сколько оцените портал
Всего ответов: 1891
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 5
Гостей: 5
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz