Как реализовать нормальное отображение картинки как фона на любом разрешении?

Question

[konura]

Здравствуйте.
Столкнулся с такой проблемкой.
Пытаюсь сделать небольшой сайт-галерею.
Использую background-cover
Если свернуть браузер в разрешение 1024x768 все очень круто смотрится, а если открыть его полностью на весь экран, то изображение приближается очень сильно и смотрится досадно.
Что можно сделать в данной ситуации?
Единственная мысль в голове - нарезать фотографий под каждое разрешение и вызывать для каждого разрешения свою.

Comments

[Cyber_bober]

а как вы используете background-size:cover: ? выводите изображения в div?

[konura]

да, в div встроенные стили использую.

Answer 1

[IvanKalinin]

А нельзя ли по дизайну сохранять пропорции вашего фонового изображения? и тогда получится круто.

например

div {
    position: relative;
    width: 100%;
    background: ...........;
    background-size: cover;
}
div::after {
    content:'';
    padding-bottom: 56.25%; // соотношение сторон 16:9
    display: inline-block;
}