Fill An Image In A Square Container While Keeping Aspect Ratio

I am trying to make a grid of images in CSS, out of random sized images that are not square. Does anyone have a solution to filling all the space inside a fixed sized div with the

Solution 1:

You can use the css, background-size: cover;

<style>
    .img1 {
        background-image: url(microsoft-logo.png);
    }
    .img2 {
        background-image: url(google-icon.png);
    }
    .img3 {
        background-image: url(Azend_Loggo.png);
    }
    .img-cover {
        width: 50px;
        height: 50px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<div class="img-cover img1">

</div>
<div class="img-cover img2">

</div>
<div class="img-cover img3">

</div>

Solution 2:

Use this CSS rule:

background-size: cover;
background-position: center;

DEMO

Solution 3:

I have some code that does this and allows you to set the required sizes ...

<?PHP
function imageResize($image,$maxwidth,$maxheight) {
    $imgData = getimagesize("img/profiles/".$image);    
    $width  = $imgData[0];
    $height = $imgData[1];
    // takes the larger size of the width and height and applies the
    // formula accordingly...this is so this script will work
    // dynamically with any size image
    // First we'll scale down the width since it's the larger of the tw values
    if ($width > $maxwidth) {
        $percentage = ($maxwidth / $width);
        $width = round($width * $percentage);
        $height = round($height * $percentage);
    }
    // Next we'll scale down the height since it's the larger of the tw values
    if ($height > $maxheight) {
        $percentage = ($maxheight / $height);
        $width = round($width * $percentage);
        $height = round($height * $percentage);
    }
    $topMargin = ($maxheight-$height)/2;
    $topMargin .= "px";
    //returns the new sizes in html image tag format...
    // this is so you can plug this function inside an image tag and just get the results
    return "width=\"$width\" height=\"$height\" style=\"margin-top:$topMargin px;\"";
}
?>

and then include the following:

<div id="profile-picture">
    <img src="img/profiles/<?PHP echo $profileImg; ?>" <?PHP echo imageResize($profileImg,238,232); ?> />
</div>

Not sure if that's helpful .. but it worked for me.

Solution 4:

You can try below css for image tag of your fixed div in this solution one condition you have to follow which is, your images size should be larger then your div i.e if your div will be 100px then minimum image size should be 100px or more then that :

div > img {
 width:100%;
 overflow:hidden;
} 

Solution 5:

Seeing as you've tagged the question with jQuery i'll take the liberty to suggest you write a small jQuery plugin for this. Here's the JSFiddle demo.

// Define plugin 'containImg'
$.fn.containImg = function(){
    this.each(function(){
        // Set variables
        var $t = $(this),
            $p = $t.parent('div'),
            pw = $p.width(),
            ph = $p.height(),
            // Figure if width or height should be 100%
            iw = ( pw / ph >= 1 ) ? 'auto' : '100%',
            ih = ( iw == 'auto' ) ? '100%' : 'auto';
        // Set dimensions
        $t.css({
            'width': iw,
            'height': ih
        });
    });
}

// Call plugin
$('img').containImg();

The basic logic is if the image has a horizontally stretched parent div, you'll need to set height:100% to fill the height, and width:auto to maintain the aspect ratio. If the parent div shape is vertical, you'll have to reverse this.

If anyone has views on how to improve the code I'm up for suggestions!