I’m sure this is possible but can’t figure out the best keyword combo to get the answer I’m looking for via searching. I am trying to code a template so that all images in our database will display no larger than 150px tall OR 150px wide on our site. Basically, whichever is the larger of the two dimensions will be the one that is scaled down to 150px in the layout. This is really just a temporary fix until we get all 10k images re-sized by hand at some point. But until then, I need to account for both image proportions. Is this possible in CSS alone, or will it require some coding? I apologize if this is something that should be easy to find - my searches didn’t return the answer.
Is it as simple as putting “max-height: 150px; max-width: 150px;” in a style tag for the img?
That would work, but it doesn’t actually resize the pictures at all. It just displays them at that size. So if you have a large picture file it will still be a large picture file and will take more bandwidth to load. It’s better if you resize the pictures before putting them on the web and optimizing them for the web.
There is a easy way to do it if the browser supports background-size. You can create a box (div) with max and width dimensions then apply the image as a background image and use background-size: contain. That will properly scale the image, keeping the aspect ratio in tact making certain the image is scaled to max dimensions regardless of orientation. Its bit how do you say… convoluted but depending on how much control over the images you have (user supplied) it works well. However, the browser must support background-size. So really the technique only works best in a mobile environment. Otherwise you will need JavaScript. The ideal method is to re-size the images server-side and cache. A good open source option for that is: http://docs.sencha.com/io/src/. Which is far better and optimized then making the browser do the work for you.
This is really just a temporary fix until we get all 10k images re-sized by hand at some point
Bah, you’ll go insane. There are a great number of programs (like ImageMagick) that’ll resize your images for you in a batch. It should take less time than adding CSS max-widths/heights everywhere actually.
But yes, if you are stuck with CSS for now, that could work. As others pointed out, the browser would be shrinking how the image is displayed, meaning it’s loading the full-size image and browsers suck at image resizing (they are not image editors). The smaller images will look like garbage, depending on how large they are to begin with.
I don’t know if you are setting height and width in the HTML… usually that’s recommended. Here, it would mean when the browser does its first rendering pass, it’ll set aside the amount of room stated in teh HTML IMG width and height attributes. Upon the second render it will use the CSS sizes. Those on very slow connections might see a strange page until it’s completely loaded.
it may come in handy but resizing is needed in case if you are encountering a
slow bandwidth…
Hello,
max-… will work fine. However, older versions of IE don’t understand max-width/height (ie6 afaik). So a JS patch will be necessary if you want such browsers to see your website properly.
Here’s an interesting approach to responsive images: Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
I would write some Imagemagick code - a while ago I modified and resized about 10,000 images into three different sizes. It took some time as I did them in batches to avoid server problems.
Using Imagemagick you could also add a background to your image and so they would all be the same size which helps in aligning them 
Otherwise you could use this method: Dynamic image resizing with PHP and mod-rewrite