CSS Cropping Landscape to Square

Question

I have spent the last 48 hours trying to do this and its driven me that insane that I have come to you guys on here before wasting anyones time.

I have viewed a number of posts on here with cropping landscape images to square but none seem to work for how the Joomla site I am working on is setup. Any help would be appreciated.

On this page here: http://www.kanzenint.com/sfront/index.php/product-page at the bottom of the page there is a module that has 4 images at the bottom.

The first image is the image which is used in each product listing, and in the main view the size will be landscape size, but in category and submodule view I want the image to be cropped to a square and it also needs to be responsive so when you resize it it will automatically adjust.

I was able to do it in pixels but not in %.

The native size of each thumb for categories and submodules is 375 x 250px at its full size but I wish it to be 250 x 250px and centered. And when its in responsive to be the same 1:1 square ratio.

Many thanks in advance for your help!

Answer 1

To keep the 1:1 aspect ratio of the container, you may use padding (this technique is described here).

To center the image in the conatainer, you can use the absolute positioning technique with negative left/right values combined with width:auto; margin:auto;

To hide the overflow, use overflow:hidden;

DEMO

HTML :

<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>

CSS :

div{
    position:relative;
    width:22%;
    padding-bottom:22%;
    margin:1%;
    float:left;
    overflow:hidden;
}
img{
    position:absolute;
    height:100%; width:auto;
    top:0;left:-50%;right:-50%;
    margin:auto;
}