Почему width:auto ломает ширину img и как это исправить

Иногда на сайте возникает странная ситуация: у изображения в HTML явно указана ширина, например width="500", но фактически на странице картинка отображается шире — например, 600 пикселей. На первый взгляд это выглядит как ошибка браузера, однако причина обычно кроется в CSS.

Разберём, почему так происходит, и покажем рабочий способ исправления, если нужно вернуть управление шириной обратно атрибуту width в теге img.

В чём проблема

Допустим, на сайте для изображений используется такой стиль:

.inner_wrapper_text .content-text_new img {
  width: auto;
  max-width: 50%;
  height: auto;
}

И при этом в HTML картинка вставлена так:

<img src="/upload/example.jpg" width="500" alt="Пример">

Логично ожидать, что изображение будет иметь ширину 500 пикселей. Но на практике это не всегда так.

Почему картинка становится шире, чем указано в img width

Атрибут width="500" в теге img задаёт желаемую ширину изображения. Но если в CSS для этой же картинки прописано width: auto, браузер начинает ориентироваться уже на CSS-правила.

Если родительский контейнер, например, имеет ширину 1200 пикселей, то правило max-width: 50% разрешает изображению занимать до 600 пикселей. В результате картинка может отображаться шире, чем значение, указанное в HTML-атрибуте width.

То есть получается следующая ситуация:

• в HTML указано width="500";
• в CSS задано width: auto;
• max-width: 50% при контейнере 1200 px даёт допустимую ширину до 600 px;
• в итоге фактическая ширина изображения становится 600 px, а не 500 px.

Почему простое удаление width:auto помогает

Если отключить или удалить width: auto, браузер снова начинает учитывать ширину, указанную в самом теге img. Поэтому изображение и возвращается к ожидаемому размеру — например, к 500 пикселям.

Но если нет возможности менять основной CSS-файл шаблона, а правки нужно вносить только через custom.css, то важно не просто удалить правило, а грамотно его переопределить.

CSS до исправления

Исходный стиль, который вызывал проблему:

.inner_wrapper_text .content-text_new img {
  width: auto;
  max-width: 50%;
  height: auto;
}

CSS после исправления

Рабочий вариант переопределения через custom.css:

body .inner_wrapper_text .content-text_new img[width] {
  width: revert-layer !important;
  max-width: 100% !important;
  height: auto;
}

Что делает это исправление

Здесь используется селектор img[width], который применяется только к тем изображениям, у которых в HTML уже указан атрибут width. Это удобно: правило не затрагивает все картинки подряд, а работает только там, где действительно задан конкретный размер.

Свойство width: revert-layer позволяет убрать влияние проблемного width: auto и вернуть обработку ширины к значению, заданному в самом HTML.

Дополнительно max-width: 100% защищает изображение от выхода за границы контейнера. То есть картинка будет брать ширину из атрибута width, но при этом останется адаптивной и не сломает вёрстку на узких экранах.

Когда это особенно полезно

Такой подход удобен в ситуациях, когда на сайте используются изображения с разными размерами — например, 300, 400 и 500 пикселей — и нужно, чтобы каждое из них отображалось именно в своей заданной ширине, без жёсткого прописывания отдельных CSS-правил под каждый случай.

Это особенно актуально для сайтов на CMS, где изображения добавляются из визуального редактора, а размеры задаются прямо в HTML.

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