Nested CSS grids and image resizing
I am learning CSS Grid and I have a problem with resizing an image.
To show you the problem, I created a main layout with 2 columns and inside the first column, I created another grid where I wanted to put an image and some text in the column.
Please remove the html comment so you can see the image.
In the code snippet, the red area shows the cell where the image should go. Now the image is larger than the red "container" grid cell (height: 200px) and I want the image to shrink inside the cell so that it fits inward and maintains its aspect ratio (left / right or up / bottom scopes are needed). The image object in the image is not working. Positioning the image like "object position: 50% 50%" would also be nice, but it won't work either. I am currently not sure how to fix this problem.
.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 content.</p>
</div>
</section>
Thank you for your help.
source to share
You have no style in the image itself. Add the following lines to your stylesheet.
.media .image img {
display: block;
max-width: 100%;
height: auto;
}
Example: https://jsfiddle.net/nsrfpkb2/8/
Update
You need to specify your .image element a position: relative;
and overflow: hidden;
. Then type img a position: absolute;
top: 50%;
left: 50%;
andtransform: translate(-50%, -50%);
.news_layout{
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;
position: relative;
}
.media .image{
height: 200px;
grid-column: 1;
grid-row: 1;
background-color:red;
position: relative;
overflow: hidden;
}
.media .image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: 100%;
height: auto;
}
.media h4{
grid-column: 1;
grid-row: 2;
}
.media p{
grid-column: 1;
grid-row: 3;
}
<section class="news_layout">
<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 content.</p>
</div>
</section>
source to share