Having an issue resizing images in CSS Grid.
I set up a main layout with 2 columns, and within the first column is another grid where I intended to place an image and some text.
Please remove the html comment so you can see the image.
The problem lies in the fact that the image is too large for the red 'container' (height: 200px) grid-cell. I want the image to shrink inside the cell while maintaining its aspect ratio. Object-fit and object-position properties on the image do not seem to work. Any suggestions on how to fix this?
.mainlayout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.media {
grid-column: 1 / 2;
grid-row: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 200px auto auto;
}
.media .image {
grid-column: 1;
grid-row: 1;
background-color: red;
}
.media h4 {
grid-column: 1;
grid-row: 2;
}
.media p {
grid-column: 1;
grid-row: 3;
}<section class="mainlayout">
<div class="media">
<div class="image">
<img src="http://placehold.it/1000x1000">
</div>
<h4>Card title</h4>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</section>Appreciate any assistance in resolving this issue.