I'm attempting to design a straightforward card layout where the image spans the entire width of the container div.
My vision is for it to resemble something like the example in the linked image below.
https://i.sstatic.net/X5oJD.png
I experimented with using object-fit:cover and 100% width but it didn't yield the desired result.
This is how it currently appears:
https://i.sstatic.net/rMlzB.png
Here's the relevant code snippet and associated 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 assistance would be greatly appreciated