фонового изображения: всегда покрывает всю страница

Question

Что я хочу достичь:

Если сайт имеет соотношение сторон широкоформатных, то фоновое изображение должно масштабироваться до 100% по горизонтали, сельхозкультур верхней и нижней часть. Я могу легко это сделать, используя background-size: cover;

Но если сайт имеет вертикальное соотношение сторон (например, смартфон), изображение повторяется вертикально. Я действительно хочу, чтобы изображение теперь масштабировалось до 100% по вертикали, что бы обрезать левую и правую часть.

Как я могу достичь обоих одновременно (просто используя css)?

Answer 1

Возможно, вы могли бы выполнить то, что вам нужно, используя медиа-запросы, используйте это в своем главном css. Медиа-запрос позволяет вам изменять атрибуты класса в зависимости от размера экрана.

body { 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

/* ----------- iPhone 6 ----------- */ 

/* Portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
    body { 
    background-repeat: repeat-y; 
    } 
} 

вы можете узнать больше о media queries here.