How do I make an image take a DIV's full dimension?

Question

I've created a custom "product card" for my site, and I want the images to take the parent's full width and height, regardless of the image's dimensions. I have tried max-width min-width max-height min-height and none seem to work. I can't think of any other solution. I'm attaching an image of what I'd like and what I'm achieving now.

https://codepen.io/paulamourad/pen/MdxedG

Answer 1

If you want to maintain aspect ratio and don't mind cropping:

.product-img-container {
    width: 100%;
    height: 260px;
    display: inline-block;
    position: relative;
    overflow:hidden; //This will crop off image portions that overflow the container
}

.card-img-top {
    width: 100%; /*If you specify only width, height will be calculated automatically 
    and aspect ratio is maintained. Similarly, if only height is specified, width is 
    calculated automatically */ 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0px;
}

You can use the top and bottom in the .card-img-top to position the image.

Answer 2

Use a div with a background image. Set its height to 100%, background-position to center, and background size to cover.

.card-img-top {
  height: 100%;
  background-size: cover;
  background-position: center;
}

Works in bootstrap cards, I forked your pen. https://codepen.io/Jason_B/pen/RmdoaQ

Answer 3

It seems you are making a simple layout more complex. You don't need to use position properties in this case. This will make simple layout more complex.

There are different scenarios how to use image more efficiently in webpages, like considering their height-width, and aspect ratio as well.

I have created a Snippet, hope so you will find it useful. Bootstrap Cards Snippet

For dynamic product card images use the following CSS properties:

.card-img-top {
    height: 100px; /* Change it based upon requirement */
    object-fit: cover;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/> <div class="container"> <h2>Bootstrap Cards Varation: </h2> <h3>Same Aspect Ratio ―</h3> <div class="row mb-5"> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1920x1080" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> </div> <!-- row --> <h3>Same height for image (Suitable for dynamic different size images) ―</h3> <style> .cstm-height-card .card-img-top { height: 100px; object-fit: cover; } </style> <div class="row mb-5 cstm-height-card"> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1200x900" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1500x800" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img src="https://source.unsplash.com/random/1400x700" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-sm btn-primary">Go somewhere</a> </div> </div> </div> </div> <!-- row --> <div class="row"> <div class="col-md-6"> <div class="card mb-3"> <div class="row no-gutters align-items-center"> <div class="col-md-4"> <img src="https://source.unsplash.com/random/600x800" class="card-img" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="card mb-3"> <div class="row no-gutters align-items-center"> <div class="col-md-4"> <img src="https://source.unsplash.com/random/600x800" class="card-img" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div> </div> <!-- row --> </div>