Image constraining tests

images.css

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0;
}

h2 {
    font-size: 1.25em;
    margin: 1em 0;
}

p {
    margin: 1em 0;
}

strong {
    font-weight: bold;
}

div {
    border: 1px solid black;
}

#a {
    width: 693px;
    height: 639px;
}

#b, #c, #d {
    width: 300px;
}

#b img, #c img {
    max-width: 300px;
}

#d img {
    max-width: 100%;
}

/*
    Vertical (and now horizontal too) centering technique via "Method 4":
    http://blog.themeforest.net/tutorials/vertical-centering-with-css/
*/
#e, #f, #g, #h {
    position: relative;
}

#e img, #f img, #g img, #h img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#e, #f {
    width: 600px;
    height: 200px;
}

#e img {
    max-width: 600px;
    max-height: 200px;
}

#f img {
    max-width: 100%;
    max-height: 100%;
}

#g, #h {
    width: 200px;
    height: 600px;
}

#g img {
    max-width: 200px;
    max-height: 600px;
}

#h img {
    max-width: 100%;
    max-height: 100%;
}

images.html

<!--
    You can find this same code at:
    http://jsfiddle.net/rpZkR/3/

    (GitHub's Gist just offers a more readable interface on mobile devices.)

    You can run this version of the code at:
    http://fiddle.jshell.net/rpZkR/3/show/light/
-->

<h1>Image Constraining Tests</h1>

<h2>Case A</h2>

<p>
    Here's a 693x639 image in a snug container. <strong>The image's width and height are specified in HTML markup</strong> (so the layout doesn't reflow as the image loads), and the container has a 1px black border:
</p>

<div id="a">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" width="693" height="639" />
</div>

<h2>Case B</h2>

<p>
    Here's the same image constrained to a 300px wide container. <strong>The image's width and height are still specified in markup</strong>, but its max-width is set in CSS to the container's <strong>pixel width</strong>:
</p>

<div id="b">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" width="693" height="639" />
</div>

<p>
    Result: <strong>no good</strong>. The inline height markup stays in effect, skewing the aspect ratio.
</p>

<h2>Case C</h2>

<p>
    Here's the same image constrained to the same 300px wide container. <strong>The image's width is still specified in markup, but its height is NOT</strong>. Its max-width is set in CSS to the container's <strong>pixel width</strong> still:
</p>

<div id="c">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" width="693" />
</div>

<p>
    Result: <strong>good</strong>. The aspect ratio is preserved. You can use this if you know the container's width in advance.
</p>

<h2>Case D</h2>
    
<p>
    Here's the same image constrained to the same 400px wide container. <strong>The image's width is still specified in markup, and its height is still NOT</strong>. Its max-width is set in CSS to <strong>100%</strong> this time:
</p>

<div id="d">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" width="693" />
</div>

<p>
    Result: <strong>good</strong>. The aspect ratio is preserved. You can use this if you don't know the container's width in advance.
</p>

<h2>Case E</h2>

<p>
    Now we constrain <strong>both</strong> the width and height to a 600x200 container (horizontally centered). <strong>We remove both the width and height inline attributes</strong>, and specify max-width and max-height in CSS to the container's <strong>pixel width</strong>:
</p>

<div id="e">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" />
</div>

<p>
    Result: <strong>good</strong>.
</p>

<h2>Case F</h2>

<p>
    Same as the last one, except we specify the max-width and max-height in CSS to <strong>100%</strong>.
</p>

<div id="f">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" />
</div>

<p>
    Result: <strong>good</strong>.
</p>

<h2>Case G</h2>

<p>
    Now let's constrain along both dimensions again, but this time, fit it (and center it) vertically. Same as case E, but the container is 200x600 this time. (We're using "<a href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/" target="_blank">Method 4</a>" to vertically center.)
</p>

<div id="g">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" />
</div>

<p>
    Result: <strong>good</strong>.
</p>

<h2>Case H</h2>

<p>
    Same as the last one, except we specify the max-width and max-height in CSS to <strong>100%</strong>.
</p>

<div id="h">
    <img src="http://images.apple.com/imac/images/overview_new1_20110426.png" />
</div>

<p>
    Result: <strong>good</strong>.
</p>

<h2>Conclusion</h2>

<p>
    If you want to constrain an image's <strong>width only</strong> while preserving its aspect ratio, easy: just specify max-width. <strong>Note, however, that you need to remove any inline height attribute</strong>, as that seems to stay in effect.
</p>

<p>
    If you want to constrain <strong>both</strong> an image's <strong>width and height</strong>, specify <strong>both</strong> max-width and max-height. <strong>Again, remove inline width and height attributes</strong>.
</p>