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

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

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

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

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

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

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

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

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

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

А вот как:

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

Ну и стили CSS

Теперь все тонкости в цифрах.

В итоге наше превью теперь выглядит слегка обрезанным а не сжкатым

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

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.