Fill An Image In A Square Container While Keeping Aspect Ratio

May 30, 2023 Post a Comment

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><divclass="img-cover img1"></div><divclass="img-cover img2"></div><divclass="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 ...

<?PHPfunctionimageResize($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 valuesif ($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 valuesif ($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 resultsreturn"width=\"$width\" height=\"$height\" style=\"margin-top:$topMargin px;\"";
}
?>

and then include the following:

<divid="profile-picture"><imgsrc="img/profiles/<?PHPecho$profileImg; ?>"<?PHPecho 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 variablesvar$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!

JavaScript Free