Background-position обрезает картинку. Как сохранить размер?
Здравствуйте, суть вопроса в том, что я использую узкую картинку, которую нельзя обрезать. Для параметра background применяю: background-position: center; сам участок css выглядит так:
.slides-container .slide-item {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Когда я меняю "диагональ" изменяя окно браузера, я могу увидеть всю картинку. На "квадрате" он ее растягивает и обрезает.
Как сохранить все свойства картинки, что описаны. Но при этом не обрезать картинку в независимости от диагонали экрана.
Если это нельзя реализовать, то хорошо будет даже не универсальное решение.
P.S. Я пробовал менять значение background-position на auto и другие, но это все не подходит.
P.S.S Внесу уточнение. Я понимаю, что картинку либо растянуть либо обрезать ибо пропорции. Но меня интересует другой вариант. Как заставить картинку или сам сайт считать что диагональ в пропорции картинки это и есть размер страницы.
Пример, у нас есть картинки 16:9 мы сохраняем пропорции и считаем что страница будет заканчиваться по окончанию картинки.
Точнее нам для отображения важна только ширина, на основании пропорции картинки будет рассчитана высота страницы.
Возьмите картинку, попытайтесь её вместить в квадрат, прямоугольники с вертикальным и горизонтальным расположением, и поймёте всю странность своего вопроса.
Либо вам придётся искажать пропорции картинки, растягивая на всю область background-size: 100% 100%;
либо обрезать background-size: cover;
либо вмещать полностью, но тогда останутся незаполненные места background-size: contain;
