вторник, 10 ноября 2009 г.

Как изменить размер изображений не потеряв в качестве используя CSS

Почти все из вас знают, что для изменения размера изображения используя CSS необходимо всего лишь задать нужную высоту или/и ширину. Но как сохранить качество изображения, если в исходной картинки и в необходимой, соотношение сторон разное?

Например, у вас была картинка 300x200, а необходимо получить размер 120x120.

Воспользуйтесь css свойством clip, которое поможет вам правильно изменить размер изображение:



Данное свойство определяет область позиционирования элемента, которая и будет отображаться. А все, что попало за эту область, будет обрезано.


Для реализации вам понадобится задать стиль и разметку для отображения картинки следующим образом.

CSS
.clip {
 position: relative;
 height: 120px;
 width: 120px;
 border: solid 1px #ccc;

}
.clip img {
 position: absolute;
 height:120px;
 clip: rect(0 150px 120px 30px);
 left: -30px;
}


HTML
<div class="clip">
<img src="demo_clip.jpg"/>
</div>


Вот и весь секрет, который поможет вам изменять размер изображения(resize image) без потери качества.

Комментариев нет:

Отправить комментарий