Как убрать сдвиг влево при добавлении картинки?

Question

[Кирилл Орлов]

Не могу понять как убрать сдвиг, помогите пожалуйста.
При добавлении картинки в код, страница сдвигается влево примерно на 5px.

Код

HTML

<div class="container">
<article class="articles">
<div class="div">
    <h3>Заголовок</h3>
    <p>Описание.</p>
    <img src="./img/1.JPG" alt="1">
</div>
</article>
<aside class="sidebar">
<aside>
</div>

CSS

.container {
    max-width: 1170px;
    margin: 0 auto;
    background-color: #fff;
}

.articles {
    width: 71%;
}

.div {
    display: flex;
    flex-direction: column;
    align-items: center;    

    width: auto;
    height: auto;
    margin-top: 100px;

    text-align: center;
}
.div h3 {
    margin-bottom: 20px;
}
.div p {
    margin-bottom: 20px;
}
.div img {
    display: block;
    max-width: 100%;
    margin-bottom: 50px;
}
.sidebar {
    width: 25%;
}

Comments

[Ankhena]

Вот сюда https://jsfiddle.net выложите код так, чтобы была видна проблема.
По возможности вместе с картинкой.
Возможно, просто включается вертикальный скролл. И соответственно, все смещается. Правда, странно, что на 5px.

[Кирилл Орлов]

Ankhena, Попробовал на этом сайте воспроизвести ошибку, но там почему то все хорошо, хотя код один в один и с картинкой (

[Ankhena]

Кирилл Орлов, всегда можно выложить сайт на бесплатный хостинг или github pages.
Но для начала проверить масштаб в браузере.

[Кирилл Орлов]

Ankhena, https://jsfiddle.net/OnlyOrly/tk27gcd3/20/
Перенес абсолютно все из страницы, на этом сайте ошибки нет, сайт не скачет, но на практике, если поменять изменить в .instruction img width со 100% до 65% в ifrefox или до 61% в Chrome, то все становится на свои места. если ширину ставить больше этих процентов, страница скачет в лево на 4-5пк.

на хостинг не получилось положить сайт (((

[Ankhena]

Кирилл Орлов,
Всё правильно.
Вы добавляете картинку, высота страницы увеличивается и появляется вертикальный скролл. Неужели вы этого не замечаете? Он забирает кусочек ширины (примерно 12-20px в зависимости от браузера).
Контейнер у вас центрирован и значит он сдвигается на половину ширины полосы прокрутки.

[Кирилл Орлов]

Ankhena, О, Боже, какой же я тупень, я сегодня весь день убил на то, чтобы разобраться с этим, а тут все банально просто... Спасибо вам огромное.

[Ankhena]

Кирилл Орлов, такое со всеми приключается, а иногда и еще круче ))

Answer 1

[Олег]

reset css

Comments

[Кирилл Орлов]

Не помогло

Answer 2

[Александр]

до загрузки картинка не имеет размера, установите ей конкретные размеры...

Comments

[Кирилл Орлов]

Хм. ответ действительно в размере. но не пойму как решить.

родные размеры картинки 720пк Х 529пк, при уменьшении ширины картинки до 65% решает проблему, 66% проблема возвращается

[Александр]

я имел в виду задать размеры стилями, если картинка физически больше, можно задать ей свойства:

object-fit: cover;
object-position: center;

или заменить ее на div нужного размера с этой самой картинкой в качестве фона

<div style="background-image: url(./img/1.JPG)" class="article__image"></div>

добавив свойства:

.article__image {
  background-position: 50% 50%;
  background-size: cover;
}