-1

I watched a tutorial on responsive web design. The tutorial specified that an image can be made responsive by setting the width style to 100%, but this will scale the image beyond its native resolution if the containing element's width is wide enough (this makes perfect sense to me.) The tutorial said you can limit the image's size to its native resolution by setting max-width to 100% (this doesn't make sense to me.) Here's a JSBin demonstrating the issue (just resize the width of the output to see the image enlarge, but once it reaches its native size the red background color can be seen continuing to grow but the image doesn't.)

Why does it limit the width to the image's native resolution and not to the containing block's width?

For the answer I'd like a snippet of text taken from either a CSS specification or HTML specification with an associated link where the extract was taken from. If my assumption that there must be a standard definition of why max-width on an image acts in this way is incorrect please explain to me what CSS rules are being applied such that this behavior occurs.

Here's the HTML snippet from the linked JSBin example:

<style>
    .column {
        width: 70%;
        margin: auto;
        background-color: red;
    }

    .img-responsive {
        max-width: 100%;   /* image stops at native size */
        /* width: 100%; */ /* image enlarges greater than native size */
    }
</style>

<div class="column">
    <img src="myimage.jpg" class="img-responsive">
</div>
OCB
  • 1
  • 2
  • 1
    The only question I'll accept is one that shows research effort and code, in the form of a [mcve], in the question itself. – Heretic Monkey Dec 06 '16 at 21:07

1 Answers1

2

Well, that's because max-width specifies a maximum width (surprise!), not a width.

The following algorithm describes how the two properties influence the used value of the 'width' property:

  1. The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
  2. If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.

If the tentative used width is NOT greater than max-width, max-width won't make the image grow.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Shoot, in the light of a new day and having someone point it out it is now clear to me I was confusing the complete scaling of the image that occurs when width is specified, versus the scaling that is only necessary if the parent container is too small when max-width is used. – OCB Dec 08 '16 at 19:16