Обрезка картинок без изменения пропорций на CSS
Верстка
Обрезка картинок без изменения пропорций на CSSЧасто появляется необходимость выводить изображения в блок фиксированного размера. В данном случае появляется проблема: как вписать картинку в блок без потери пропорции.
В большинстве блогов рекомендуют писать JavaScript код, который будет вычислять размеры картинки и масштабировать ее в нужный размер. Но это не наш метод. Привязка к js-коду не является хорошей идеей. К тому же до полной загрузки картинок скрипт будет бездействовать. Соответственно, страница некоторое время будет кривой.
Конечно, можно обрезать и масштабировать картинки до добавления их на сайт. но каждый раз запускать редактор и обрезать картинку по пикселям тоже не есть хорошо. Поэтому предлагаю воспользоваться привычным CSS, и обрезать картинку при помощи него. В данном случае, обрезка будет происходить по вертикали. То есть, по ширине картинка будет влезать полностью, а по высоте обрезаться.
Суть данного метода в том, что картинка будет вписана в блок определенных размеров. Все что не будет влезать в этот блок будет скрыто. Обрамляющий блок будет иметь те же самые свойства, что и картинка. Поэтому, его можно будет располагать и выравнивать так же, как и обычную картинку. Вариант, конечно, не идеальный, но действенный.
Для начала, подберем пациентов. Я вбрал картинки трех животных из семейства кошачих разных пропорций. Ширина у всех картинок одна - 200 пикселей.
высота = 198px
высота = 257px
высота = 124px
При такой разности пропорций картинок лучшим вариантом будет взять обрамляющий блок размером 200x120 пикселей.
После всех манипуляций с 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Обрезка картинок без изменения пропорций на CSS
Верстка
Скрипты, инструкции, справочники
| Категория: | Верстка |
| Просмотрено: | 25704 |
| Рейтинг: | 4.2/26 |
| Дата добавления: | 2012-12-28 17:24, Пятница |
| Добавил: | Szen |
| Теги: | css трюк, масштабирование картинок, картинки, размер картинок, пропорция |
Рекомендуем
Дополнительно к Обрезка картинок без изменения пропорций на CSS
Мини-форум
| № 0 | 2012-12-28 17:24 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Обрезка картинок без изменения пропорций на CSS". |
| Гость |
