Правильное превью картинки на CSS
Порой вам необходимо вывести превью картинки с заданными вами размерами.
Чтоб превью не казалось слишком сжатым или растяннутым мы предлагаем вот какое решение…
Немного поясню в чем вопрос:
Иногда нам необходимо вывестит превью полной картинки с заданными размерами, и если просто к картинке просто дописать высоту и ширину (height and width) то зачастую мы получаем искаженное првеью.
Теперь на примерах:
У нас есть картинка, шириной в 400 пикселей, высотой в 200
И нам необходимо вывести превью этой картинки шириной в 300 пикселей и высотой в 200.
Если мы просто зададим картинке ширину 300px, то мы получим искаженное превью (суженное)
1 |
<img src="image.jpg" width="300" alt="" /> |
Но как сделать, чтоб изображение не искажалось?
А вот как:
Закрываем нашу картинку в блок div и добавляем ей класс (к примеру absolute)
1 |
<div class="main"><img src="image.jpg" class="absolute" alt="" /></div> |
Ну и стили CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.main{ width:300px; margin: 0 auto; overflow:hidden; position: relative; height: 200px; } img.absolute{ left: 50%; margin-left: -200px; position:absolute; } |
Теперь все тонкости в цифрах.
В итоге наше превью теперь выглядит слегка обрезанным а не сжкатым