How Do I Make An Image Take A Div's Full Dimension?

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

Solution 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.

Solution 2:

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;
}

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" /><divclass="container"><h2>Bootstrap Cards Varation: </h2><h3>Same Aspect Ratio ―</h3><divclass="row mb-5"><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1920x1080"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-sm btn-primary">Go somewhere</a></div></div></div><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1920x1080"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-sm btn-primary">Go somewhere</a></div></div></div><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1920x1080"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"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><divclass="row mb-5 cstm-height-card"><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1200x900"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-sm btn-primary">Go somewhere</a></div></div></div><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1500x800"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-sm btn-primary">Go somewhere</a></div></div></div><divclass="col-md-4"><divclass="card"><imgsrc="https://source.unsplash.com/random/1400x700"class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-sm btn-primary">Go somewhere</a></div></div></div></div><!-- row --><divclass="row"><divclass="col-md-6"><divclass="card mb-3"><divclass="row no-gutters align-items-center"><divclass="col-md-4"><imgsrc="https://source.unsplash.com/random/600x800"class="card-img"alt="..."></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div></div></div><divclass="col-md-6"><divclass="card mb-3"><divclass="row no-gutters align-items-center"><divclass="col-md-4"><imgsrc="https://source.unsplash.com/random/600x800"class="card-img"alt="..."></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">Card title</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div></div></div></div><!-- row --></div>

Solution 3:

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