I have a 300x300 image that I'd like to fit into a grid (sized 158x175), but when I have...
<div className='box'>
<div className='test'>
<img src='https://via.placeholder.com/300x300' alt='Image Example'/>
</div>
<div className='test'>
<p>Random text</p>
</div>
<div className='test'>
<p>Random text</>
</div>
</div>
box {
display: grid;
grid-template-columns: 158px auto auto;
grid-template-rows: 175px;
div.test {
&:first-child {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
like I've seen a lot of people say from doing some research, the 300x300 block shrinks to 158x158, leaving about 17px of grid space left below the image. I would like the image to be cropped to fit the entire space, but I can't seem to get it to work. Does anyone have ideas as to what I'm doing wrong? I have also tried replacing height: 100%; to height: auto, and that moves my image down a few pixels, but I pretty much have the same issue as before.
couple of things!
make sure that 'box' in your css is '.box'
&:first-child
locks on to the occurrence of div.test, not div.test's first child.
So if you simply change your scss to be:
.box {
display: grid;
grid-template-columns: 158px auto auto;
grid-template-rows: 175px;
div.test {
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
Here is a codepen for you: https://codepen.io/webdevjones/pen/LYQPZaM