Question 301555 in Html Question posted in
Some basic documentation can be found here.

Html – How to set a max size for divs that contain large images?

I have a div.container that has some div.card s inside it. Each div.card has a image that’s really big so I want to limit the height of the div.card s. So

I made div.container to be a grid container with grid-auto-rows: minmax(auto, 200px). The div.card resizes but the images overflow, even though they have height 100% set.

Minimized code that causes problems:

HTML:

<div class="container">
    <div class="card">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.jpg">
    </div>
    <div class="card">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.jpg">
    </div>
</div>

CSS:

div.container {
    display: grid;
    grid-auto-rows: minmax(auto, 200px);
}

div.card {
    display: grid;
}

div.card > img {
    max-height: 100%;
}

Codepen link: https://codepen.io/Bino-Manjesh/pen/dyarWdK

Also, it works as intended in firefox but not on chromium. On chromium it works if I remove display: grid from the div.card. (I need display grid because there is going to be some text along with the img in div.card)

Is this possibly a bug?

Tags:

2

Answers


  1. 0

    If you want a full-width image, with no overflow or stretching, you can use object-fit:cover to have the browser fit the image for you.

    div.card > img {
    max-height: 100%;
    width:100%;
    overflow:hidden;
    object-fit: cover;
}
    Login or Signup to reply.
  2. 0

    Firstly, you can try using object-fit: cover to adjust with your parent div size and overflow: hidden to hide the unnecessary portion of image displayed. Secondly, try running your codes on private/incognito. Most similar cases happen because your browser’s caching.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search