How to make image fit in div? - html

Question

I am trying to create a simple card, where image should cover/fit the full width of the container div.
My desired style would be something similar like in the image below.
I tried to apply object-fit:cover with 100% width but didn't help.
Here is how it looks like now
Here is related code and sandbox link
html/jsx
import React from "react";
import styles from "./Card.module.css";
function App() {
return (
<div className={styles.cardWrapper}>
<img
src="https://i.ebayimg.com/00/s/MTAyNFg1NzY=/z/qWYAAOSwm1Vcc6F4/$_72.JPG"
alt="description"
/>
<h3 style={{ fontSize: "15px" }}>title</h3>
<div className={styles.description}>description</div>
</div>
);
}
export default App;
and css
.cardWrapper {
width: 165px;
height: 192px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);
text-align: center;
margin: 0 auto;
align-items: center;
}
.description {
font-size: 12px;
color: #808080;
margin-top: 20px;
font-weight: 400;
}
.cardWrapper img {
height: 100%;
width: 100%;
object-fit: contain;
width: auto;
height: auto;
}
Any help will be appreciated

Answer 1

Simply remove the width: auto and height: auto from your .cardWrapper img:
.cardWrapper {
width: 165px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 25%);
text-align: center;
margin: 0 auto;
align-items: center;
padding-bottom: 15px;
}
.description {
font-size: 12px;
color: #808080;
margin-top: 20px;
font-weight: 400;
}
.cardWrapper img {
height: 100%;
width: 100%;
}
<div class="cardWrapper">
<img
src="https://i.ebayimg.com/00/s/MTAyNFg1NzY=/z/qWYAAOSwm1Vcc6F4/$_72.JPG"
alt="description"
/>
<h3>title</h3>
<div class="description">description</div>
</div>
You were overwriting your already working 100% rules, so just leave them in, and remove anything else. You dont need the object-fit either.
As stated by #louielyl in the comments:
remove the absolute height on the .cardWrapper as well, otherwise the description has no room left in the wrapper and falls out.

Answer 2

The reason why your width:100% and height:100% didn't work is because your latter css width: auto; height: auto; overwrite them.
Try this and you will see your image grows as expected:
.cardWrapper img {
height: 100%;
width: 100%;
object-fit: contain;
}
It happens because it is CSS's behavior to override with the latter styling that has the same property, for details, you could take a look at Specificity.