Making all photos square via css

Question

I'm trying to make a series of photos into square photos. They may be rectangular horizontally (i.e. 600x400) or vertically (400x600), but I want to get them to be 175x175 either way. My thought was to max-height or max-width the smaller side, and not allow overflow beyond 175px on the larger side...however, I'm having problems with it.

Is this possible with css?

Below is my attempt, but it giving rectangles still:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>

Answer 1

You can set the width/height of the parent div then set the child img tag to width:100%; height: auto;

That will scale the image down to try to fit the parent with aspect ratio in mind.

You can also set the image as a background-image on the div Then if you can use css3 you can mess with the background-size property. It's attributes are: contain, cover, or a specificed height (50%, 50%) (175px, 175px) You could also try to center the picture with background-position

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">

Answer 2

Okay I got this.

Don't know if it's too late or what, but I've come up with a 100% pure CSS way of creating square thumbnails. It's something that I've been trying to find a solution for for quite a while and have had no luck. With some experimentation, I've got it working. The main two attributes to use are OVERFLOW:HIDDEN and WIDTH/HEIGHT:AUTO.

Okay here's what to do:

Let's say you have a batch of images of varying shapes and sizes, some landscape, some portrait, but all, of course, rectangular. The first thing to do is categorize the image links (thumbnails) by either portrait or landscape, using a class selector. Okay, so let's say you want just to create two thumbnails, to make this simpler. you have:

img1.jpg (portrait) and img2.jpg (landscape)

For HTML it would look like this:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

So, at this point since there is no css yet, the above code would give you your full-sized image as a thumbnail which would link to the same full-sized image. Right, so here's the css for both portrait and landscape. There are two declarations for each (the link and the link's image):

.landscape {
        float:left;
        width:175px;     
        height:175px;    
        overflow:hidden;    
    }

.landscape  img{
        width:auto;
        height: 175px;   
    }

.portrait {
        float:left;
        width:175px;
        height:175px;
        overflow:hidden;    
    }

.portrait img {
        width:175px;    <-- notice these
        height: auto;   <-- have switched
    }

The most important things are the width and height and the overflow:hidden. Float left isn't necessary for this to work.

In the landscape thumbnail declaration (.landscape) the bounding box is set to 175 x 175 and the overflow is set to hidden. That means that any visual information larger than that containing 175px square will be hidden from view.

For the landscape image declaration (.landscape img), the height is fixed at 175px, which resizes the original height and the width is set to auto, which resizes the original width, but only to the point of relating to the bounding square, which in this case is 175px. So rather than smush the width down into the square, it simply fills the square and then any extra visual information in the width (i.e. the overflow) is hidden with the overflow:hidden.

It works the same way for portrait, only that the width and height is switched, where height is auto and width is 175px. Basically in each case, whatever dimension exceeds the other is set to auto, because naturally the larger dimension would be the one that would overflow outside of the set thumbnail dimensions (175px x 175x).

And if you want to add margins between thumbs, for instance a 5px white margin, you can use the border property, otherwise there will be no margin where the information is overflowing.

Hope this makes sense.