Making all photos square via css

Issue

I’m trying to make a series of photos into square photos. They may be rectangular horizontally (i.e. 600×400) or vertically (400×600), but I want to get them to be 175×175 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>

Solution

I highly suggestion the NailThumb jquery plugin for anyone that is looking to do this. It allows you to create square thumbnails without distortion. http://www.garralab.com/nailthumb.php

Answered By – user749798

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published