I'm working on creating images that are responsive and fit into a square shape regardless of their original dimensions. For example:
http://prntscr.com/87jey9 (apologies for the poor image quality, unable to upload images here due to limited reputation.)
The goal is for the image to be centered within the square, showing as much of the image as possible without any empty white space in the cropped square images. I managed to achieve this using jQuery initially, but encountered issues when there were multiple images on the page.
$(window).on('load resize',squarifyImage);
function squarifyImage(){
var cw = $('.square').width();
$('.square').css({'height':cw+'px'});
$('.square').css('overflow', "hidden");
$('.thumb').css('width', '100%');
var w = $('.thumb').width();
var h = $('.thumb').height();
if(w < h){
$('.thumb').css('width', '100%');
w = $('.thumb').width();
h = $('.thumb').height();
var top = (((h - w)/2)*-1);
$('.thumb').css('margin-top', top);
} else {
$('.thumb').css("width", "");
$('.thumb').css('height', '100%');
w = $('.thumb').width();
h = $('.thumb').height();
var left = (((w - h)/2)*-1);
$('.thumb').css('margin-left', left);
}
}
The HTML structure is as follows,
<div class="square">
<img class="thumb" src="testing.jpg"></img>
</div>
Is there a way to achieve this using CSS alone?