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

Question

[konura]

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

Comments

[Cyber_bober]

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

[konura]

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

Answer 1

[Evanre]

Пробуй разные свойства для background. Все очень индивидуально, зависит от картинки (ее размера и соотношения сторон). Картинка становится слишком большой, потому что, по всей видимости, ее соотношение сторон близится к квадрату (1:1 ли 4:3 например) a у cover стоит задача заполнить картинкой всю площадь. Либо обрежь ее, либо найди в более высоком разрешении (с соотношением сторон 16:9 например).
Лучше смогу помочь если накидаете пример в codepen либо дадите ссылку на проект.

Answer 2

[IvanKalinin]

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

например

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