StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPure CSS image thumbnails
text
Body
copied!<p>I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say <code>200px</code> wide and <code>150px</code> tall).</p> <p>What I'd like to find are some magical HTML markup and CSS rules that will</p> <ol> <li>Allow the images to be included in normal <code><img></code> elements</li> <li>Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.</li> <li>Not require JavaScript or specific knowledge of each image's actual dimensions</li> </ol> <p>I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:</p> <pre><code><div class="thumb"> <img src="360x450.jpeg"> </div> </code></pre> <p>and CSS:</p> <pre><code>.thumb { width: 200px; height: 150px; overflow: hidden; } .thumb img { min-width: 200px; min-height: 150px; width: 200px; } </code></pre> <p>This attempt breaks in a variety of ways:</p> <ol> <li><p>Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.</p></li> <li><p>Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded <code>width</code> and <code>min-height</code> rules.</p></li> <li><p>But without that hard-coded <code>width</code>, images that are larger than the minimum height and width will not be resized at all.</p></li> </ol> <p>If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:</p> <ul> <li><a href="http://overloaded.org/tmp/imgtest/">http://overloaded.org/tmp/imgtest/</a></li> <li><a href="http://overloaded.org/tmp/imgtest/imgtest.zip">http://overloaded.org/tmp/imgtest/imgtest.zip</a></li> </ul> <p>I know that I can solve this problem by omitting the <code><img></code> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <code><img></code> elements in the page.</p> <p>Thanks for any help or pointers you can provide!</p> <p><strong>Edit:</strong> I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload