Что делать если изображение занимает не всю ширину браузера как в макете?

Question

[Даня Дубрин]

Добрый день друзья. Учу верстку не так давно, и столкнулся с одной проблемой. Я как обычно, взял макетик, начал практиковаться. Ну и вот , изображение в макете:
И изображение которое получается у меня:
Как видно, отличия отступов по бокам, просто колоссальные. Не подскажите пожалуйста, как это все исправить, может есть какое то обнуление, или что-то в этой роде. Или я что то упустил в CSS. Если не сложно, то можете написать код так, как бы вы в моей ситуации поступили. Спасибо большое за понимание.
Вот скрин макета побольше:

Answer 1

[Chaferka]

Кажется, просто ширина Вашего экран и окна браузера больше, чем ширина макета. Уменьшите ширину окна до ширины макета и все отступы встанут на свои места.

Comments

[Даня Дубрин]

Ну у меня была такая мысль конечно, но неужели все так просто? Если будет допустим реальный заказ, в макете будут отступы одни, а у меня другие ? А если у пользователя ширина еще больше, то что, это нормально ?:). Это просто вопрос если что (:

[Chaferka]

Если ширины макета и окна браузера разные расхождение с макетом будет по определению. Вопрос только, где будет расхождение. Расхождение в отступах по бокам контента на десктопе – это нормальная практика. Это называется фиксированная верстка, т.к. ширина контента фиксированная, а при увеличении ширины окна, увеличиваются отступы по бокам.
Еще возможна резиновая верстка – это когда контент меняет свои размеры, в зависимости от ширины окна браузера. Обычно такая верстка делается под мобилку, но возможно и под десктоп. Такая верстка сложнее и требует больше времени.

Если будет допустим реальный заказ, в макете будут отступы одни, а у меня другие ?

Не может быть всё одинаково на двух объектах разных размеров. В любом случае будет что-то отличатся. Вы можете только уточнить у заказчика, каким образом страница(или какая то часть страницы) должна адаптироваться к разным размерам окна и сделать либо фиксированную верстку, либо резиновую, либо какую-то еще.

А если у пользователя ширина еще больше, то что, это нормально ?

Это нормально. На 8К экранах пустоты по бокам могут быть процентов 70–80 от всей ширины. Можете сами проверить в инспекторе браузера на каком-нибудь сайте(на этом, например). Только вот пользователей 8К экранов сейчас, наверно < 0,1%.

[Даня Дубрин]

Chaferka, Спасибо большое за пояснение, очень благодарен.

Answer 2

[Anonimmus]

Задайте img
max-width:100%
Height:auto;
Min-height: скажем пикселей 1000
Object-fit:cover
Object-position:center

Если это бэкграундом то background size cover и так же высоту.

Картинка растянется и везде будет одинаково кроме 8к там картинка будет обрезаться но будет на весь экран и высоту)

Рекомендую канал - фрилансер по жизни там много печенек