Why does my image overflow with a defined max-width but works fine with a defined width? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed last month.

Improve this question

When I have the width style of an image defined to be 100% of the parent then the image does not overflow. But, when I define the max-width to be 100% of the parent then it overflows. Here is my simplest working example:

The HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Image Test</title>
  </head>

  <body style = "width: 70%; min-width: 400px; margin: 0 auto; background-color: #19747E">
    <header style = "background-color: #A9D6E5">
    </header>
    <main style = "background-color: #A9D6E5; width: 100%">
      <img src="square.svg" max-width = "100%">
    </main>
  <footer>
  </footer>
  </body>
</html>

The SVG:

<svg version="1.1" width="1902" height="439" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="1902" height="439" fill="blue" rx="20" ry="20"/>
</svg>

Why's it do this? My main issue is I have an image that is sometimes bigger than the parent; and when the image is smaller than the parent I don't want it to stretch the image so setting width to 100% is not an option.

There's no HTML max-width attribute on img elements. You want style="max-width:100%" — Alohci
– Alohci, Commented Sep 21 at 20:11

Curious Learner · Accepted Answer · 2025-09-21 20:16:59Z

1

Your img element:

<img src="square.svg" max-width = "100%">

Correct way to write it:

<img src="square.svg" style="max-width: 100%" />

Inline styles should be specified inside style attribute's value, not directly as attribute of the element.

answered Sep 21 at 20:16

Curious Learner

1,5491 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does my image overflow with a defined max-width but works fine with a defined width? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related