Обрезка картинок без изменения пропорций на CSS
ForuCoz.Сom - Портал где есть все для ucoz, у нас всегда, самые нужные и интересные php и js скрипты для ucoz и шаблоны для ucoz, огромный выбор иконок и графики для Photoshop.
Logical-Portal.ru Информационно развлекательный портал.
Вы просматриваете материал Обрезка картинок без изменения пропорций на CSS. Думаю вам понравился материал Обрезка картинок без изменения пропорций на CSS и вы воспользуетесь им! :)
Часто появляется необходимость выводить изображения в блок фиксированного размера. В данном случае появляется проблема: как вписать картинку в блок без потери пропорции.
В большинстве блогов рекомендуют писать 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>
.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>
Как видите, картинки не исказились, а только обрезались. Хотя на самом деле остались полноразмерными. Этот метод будет очень удачным, если разность пропорций Ваших картинок невелика.
Не указан
| Всего комментариев: 0 | |