Как сделать, чтобы при уменьшении экрана картинка сжималась равномерно с обоих концов?

Question

[Yurii]

Столкнулся с такой проблемой, при уменьшении экрана до 670px изображение уменьшается равномерно. При достижении разрешения экрана 670px картинка в блоке занимает всю ширину экрана. А когда продолжаю уменьшать размер экрана, в инспекторе кода, то картинка уже уменьшается не равномерно, а сжимается только с правого бока. Я сначала думал, что не даёт ей занимать всю ширину блок меню, но когда уменьшил его ширину, то ничего не поменялось. Только и сам блок меню стал меньше по ширине. Как можно исправить эту ситуацию ?
Вот скрины с инспектора



Вот часть разметки HTML


И стили для разметки выше


Не пойму в чем причина

Comments

[html-css]

залейте на codepen хотя бы
со скринов мало что понятно

[Тарас Шульга]

Плюсую про codeopen первое, что приходит на ум, что-то создает скрол и из-за этого картинка перестает сжиматься.

[Aetae]

Или хотя бы просто код текстом. Никто не будет перепечатывать, чтоб чисто посмотреть: "а что же там произошло?"
Ставлю на то, что при < 670px подрубается какой-то @media и ломает как-то стили.

[Ankhena]

Где-то ниже выпирает другой блок или псевдоэлементик. Прокрутите страницу и вы его увидите. А если нет, то пообводите все рамочками и тогда увидите.

[Yurii]

html-css, а на codepen залить полностью весь код ?

Answer 1

[xmoonlight]

width: 100vw;
min-width: 100vw;

Comments

[html-css]

width: 100vw; - даст горизонтальный скролл

[xmoonlight]

html-css, overflow-x:hidden и margin/paddin:0 на html/body

[html-css]

xmoonlight, так проще же width:100% дать

[xmoonlight]

html-css, проще, но не правильнее!

[DarkFlame77]

xmoonlight, чеэта? если родитель занимает всю ширину страницы, то по сути нет разницы будут это % или vh. И в таком случае на кой скрывать полосы, если проценты прекрасно справятся с задачей?

[xmoonlight]

DarkFlame77, Во-первых, не vh, а vw!
Во-вторых, это ничем не хуже, а наоборот - сразу избавит от багов с кастомной прокруткой (в самом браузере и/или в самом коде страницы).
Не все браузеры корректно могут ставить 100% по границам окна вкладки!

[Yurii]

xmoonlight, это надо добавить в html, body в файле стилей ?
Да, сработало. Можете пояснить начинающему, почему это помогло ? С маржином и паддингом понятно, а overflow-x это по горизонтальной оси что-то дало, а что именно ?

[DarkFlame77]

Yurii, overflow-x:hidden - скрывает горизонтальную полосу прокрутки.

[xmoonlight]

Yurii, DarkFlame77 пояснил верно.

Answer 2

[Karpion]

Я так понял - картинка прижимается к левому краю. А если её отцентрировать - то она будет в центре блока.
Отцентрировать можно многими способами. Проще всего - дописать в тег IMG опцию ALIGN=center.

Comments

[Yurii]

На широком экране она то в центре и сжимается равномерно до размера экрана 670px. Проблему уже помогли решить. Выше я отметил.

Answer 3

[Soer44]

.img {
         max-width:100%;
         height:auto;
}