/ Скрипты / Правильное превью картинки на CSS

Правильное превью картинки на CSS

Автор: delux · Опубликовано 26.03.2016 · Обновлено 25.02.2019

Порой вам необходимо вывести превью картинки с заданными вами размерами.
Чтоб превью не казалось слишком сжатым или растяннутым мы предлагаем вот какое решение…

Немного поясню в чем вопрос:

Иногда нам необходимо вывестит превью полной картинки с заданными размерами, и если просто к картинке просто дописать высоту и ширину (height and width) то зачастую мы получаем искаженное првеью.

Теперь на примерах:

У нас есть картинка, шириной в 400 пикселей, высотой в 200

И нам необходимо вывести превью этой картинки шириной в 300 пикселей и высотой в 200.
Если мы просто зададим картинке ширину 300px, то мы получим искаженное превью (суженное)

<img src="image.jpg" width="300" alt="" />

1	<img src="image.jpg" width="300" alt="" />

Но как сделать, чтоб изображение не искажалось?

А вот как:

Закрываем нашу картинку в блок div и добавляем ей класс (к примеру absolute)

<div class="main"><img src="image.jpg"  class="absolute" alt="" /></div>

1	<div class="main"><img src="image.jpg" class="absolute" alt="" /></div>

Ну и стили CSS

.main{
    width:300px;
    margin: 0 auto;
    overflow:hidden;
    position: relative;
    height: 200px;
}

img.absolute{
    left: 50%;
    margin-left: -200px;
    position:absolute;
}