object fit - Constraining an image to fit within its wrapper using CSS - Stack Overflow

admin管理员组

文章数量:1122832

I am using jQuery to load images into 300x300px wrappers from a .json file. The images are different aspect ratios - some portrait, some landscape. I want the image to fill the wrapper without changing its aspect ratio.

object-fit: contain sounds like it might be the thing, but it does not work as-expected.

Here is the template for each image:

function loadData(jsonListings){
    $.each(jsonListings, function(i,v) {        
        $("body").append (
            "<article class='"+v.tags+"'>" + 
                "<div class='wrapper'>" +
                    "<img src='img/" + v.folder + "/IMG_" + v.img + ".jpg' />" +
                "</div>" +
                "<p>" +
                    "<span class='imgno'>" + v.img + "<br><span class='smaller'>" + v.store + "</span>" + "</span>" +
                    "<span class='descrip'>" + v.text + "</span>" +
                "</p>" +
            "</article>\n")
    });
}

which will produce something like this sample:

            <article class=''> 
                <div class='wrapper'>
                    <img src='img/folder/IMG_1234.jpg' />
                </div>
                <p>
                    <span class='imgno'>Number<br>folder</span></span>
                    <span class='descrip'>text</span>
                </p>
            </article>

And here is the relevant CSS:

article {
    margin: 5px;
    display: inline-block;
    font-size: .8em;
    color: #666; 
}
article .wrapper {
    width:300px;
    height: 300px;
    border: 1px solid lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
article .wrapper img {
    object-fit: contain;
    overflow: hidden;
}

What's happening is the images are filling the wrapper horizontally, but overflowing vertically. In other words, portrait pictures render as 300px wide and hang off the top and bottom of the wrapper.

What's even more strange (to me) is that the object-fit: property has zero effect on the image, no matter what it's set to. It is actually the overflow: hidden that constrains the the images to the wrapper (otherise they render full-size) - yet overflow:hidden does not constrain the height of the images.

(see attached screen grab) pics 2521 and 2522 are portrait-aspect; they are constrained horizontally but I want them constrained vertically (i.e. within the light blue wrapper box).

I've tried every flavour of setting but I don't understand how to correctly use these properties.

I am using jQuery to load images into 300x300px wrappers from a .json file. The images are different aspect ratios - some portrait, some landscape. I want the image to fill the wrapper without changing its aspect ratio.

object-fit: contain sounds like it might be the thing, but it does not work as-expected.

Here is the template for each image:

function loadData(jsonListings){
    $.each(jsonListings, function(i,v) {        
        $("body").append (
            "<article class='"+v.tags+"'>" + 
                "<div class='wrapper'>" +
                    "<img src='img/" + v.folder + "/IMG_" + v.img + ".jpg' />" +
                "</div>" +
                "<p>" +
                    "<span class='imgno'>" + v.img + "<br><span class='smaller'>" + v.store + "</span>" + "</span>" +
                    "<span class='descrip'>" + v.text + "</span>" +
                "</p>" +
            "</article>\n")
    });
}

which will produce something like this sample:

            <article class=''> 
                <div class='wrapper'>
                    <img src='img/folder/IMG_1234.jpg' />
                </div>
                <p>
                    <span class='imgno'>Number<br>folder</span></span>
                    <span class='descrip'>text</span>
                </p>
            </article>

And here is the relevant CSS:

article {
    margin: 5px;
    display: inline-block;
    font-size: .8em;
    color: #666; 
}
article .wrapper {
    width:300px;
    height: 300px;
    border: 1px solid lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
article .wrapper img {
    object-fit: contain;
    overflow: hidden;
}

What's happening is the images are filling the wrapper horizontally, but overflowing vertically. In other words, portrait pictures render as 300px wide and hang off the top and bottom of the wrapper.

What's even more strange (to me) is that the object-fit: property has zero effect on the image, no matter what it's set to. It is actually the overflow: hidden that constrains the the images to the wrapper (otherise they render full-size) - yet overflow:hidden does not constrain the height of the images.

(see attached screen grab) pics 2521 and 2522 are portrait-aspect; they are constrained horizontally but I want them constrained vertically (i.e. within the light blue wrapper box).

I've tried every flavour of setting but I don't understand how to correctly use these properties.

• css
• object-fit

Share Improve this question Follow edited Nov 21, 2024 at 21:46 DaveC426913 asked Nov 21, 2024 at 21:43 DaveC426913DaveC426913 2,04666 gold badges3737 silver badges6363 bronze badges 1

• As a pure html+css issue, can you turn this into a runnable snippet that shows off the problem, rather than just code blocks? – Mike 'Pomax' Kamermans Commented Nov 21, 2024 at 21:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Oh. Adding this does the trick:

article .wrapper img {
    width:100%;
    height: 100%;
}

本文标签： object fitConstraining an image to fit within its wrapper using CSSStack Overflow