Как убрать обрезку у картинки в зависимости от размера экрана?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/ExaBpKx

На iPad уже происходит обрезка:



Сама картинка обрезается по ширине

Comments

[Rustam Bainazarov]

background-size: contain;

[Genri_Rus]

Рустам Байназаров, тогда картинка будет иметь белые отступы по бокам при 2к и больше разрешении

[Rustam Bainazarov]

Genri_Rus, безусловно. Ну тогда фиксируйте точку фона внизу вот так, чтобы стол был виден всегда:

[Genri_Rus]

Рустам Байназаров, а как там в full посмотреть ?

В codepen есть такой функционал, а в jsfiddle что-то не могу найти

[Rustam Bainazarov]

Genri_Rus, https://jsfiddle.net/cpL6xue3/3/show

[Genri_Rus]

Рустам Байназаров, спасибо

Show нужно прописать в строке я так понял ?
Просто не совсем понятно

[Rustam Bainazarov]

Genri_Rus, не за что, в конце ссылки добавить: /show.

[Genri_Rus]

Рустам Байназаров, но все равно стола не видно

Наверно через тег img придется делать ?

[Rustam Bainazarov]

Genri_Rus, img не поможет. Стол видно ровно по самому нижнему краю. Нужно понимать, что соотношение сторон картинки не позволяет уместить стол грамотно на всех вариациях соотношений сторон разных экранов, если мы используем cover и одну картинку.

Поэтому на разных разрешениях нужно делать разные картинки или разные размеры блоков и т. п.

[Genri_Rus]

Рустам Байназаров, а как насчет этого варианта ?

https://codepen.io/Genri_Rus/full/RwNzYpq

Answer 1

[name surname]

background-size: 100%; вместо cover

Comments

[Genri_Rus]

Тогда получается вот так:

[Genri_Rus]

А белый фон как лучше убрать ?

[name surname]

background-position: 50% 0;

[Genri_Rus]

name surname, как вариант неплохой

Answer 2

[anyshape]

Media Queries попробуйте

Answer 3

[Данил Полянский]

Попробуйте добавить в самое начало CSS кода следующую строку:

html {
    margin: 0;
    padding: 0;
}

Comments

[Genri_Rus]

Я про саму картинку имел ввиду, а не про отступы

[Данил Полянский]

Genri_Rus, чтобы исправить эту проблему надо с отступами поработать, попробуйте вставить эту строку в код и посмотрите результат.

[Genri_Rus]

Данил Полянский, сделал, ничего не изменилось, стол обрезан: https://codepen.io/Genri_Rus/full/ExaBpKx