Currently, I am working on styling a page in NextJS. The challenge I'm facing is resizing an image that is inside an anchor within a div. Despite numerous attempts, the image refuses to resize as desired.
I've experimented with applying properties to all three elements together, individually, and in pairs - but no luck so far.
Here is the relevant code snippet:
<div className={styles.projectContainer}>
<div className={styles.projectDescriptionContainer}>
<h3>Title</h3>
<p>Lorem ipsum etc..</p>
</div>
<div className={styles.projectPhotoContainer}>
<a className={styles.projectLink}
href="heroku link"
target="_blank">
<img src='/local-file.png' />
</a>
</div>
</div>
.projectContainer {
display: inline-block;
width: 100vw;
height: 10vh;
}
.projectDescriptionContainer {
display: inline-block;
width: 20vw;
height: 10vh;
}
.projectPhotoContainer {
display: inline-block;
width: 20vw;
height: 20vh;
}
.projectLink {
display: inline-block;
}
.img {
object-fit: cover;
width: 100%;
height: auto;
}