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

19754
10 из 10
Проголосовало: 11






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

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

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

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

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

Код
<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://webo4ka.ru/Ucoz7/52061561.jpg" width="200" alt="Картинка 1" border="0">
</span>

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


Как видите, картинки не исказились, а только обрезались. Хотя на самом деле остались полноразмерными. Этот метод будет очень удачным, если разность пропорций Ваших картинок невелика.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://szenprogs.ru/
  • Всего комментариев: 4

Poma
0
Poma написал: Написано 15 Октября 2013 в 18:47
Комментарий №4
куда вставлять то?

serg1115xxx
0
serg1115xxx написал: Написано 02 Января 2013 в 04:42
Комментарий №3
класно

niKsoN
+1
niKsoN написал: Написано 30 Декабря 2012 в 15:38
Комментарий №2
исправте display:inline block; на display:inline-block;

lesha1992
0
lesha1992 написал: Написано 30 Декабря 2012 в 13:38
Комментарий №1
Прямо как по заказу! Спасибо автору огромное!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Acht написал:
  • Тест
    Мда, у меня тоже не работает. Или нужно ждать обновление?
    Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
    Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
    Последние темы
    Опрос
    249
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 7
    Гостей: 6
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: