Check out the overflow on the child element class and max-height on the parent to achieve the desired result.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
min-height: 100%;
}
.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr repeat(2, 3fr);
gap: 1rem;
background: orchid;
max-width: 100%;
max-height: 100vh;
}
.class{
background: teal;
overflow: hidden;
}
img{
display:block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="parent">
<div class="class">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
</div>
<div class="class">
<p>Good</p>
</div>
<div class="class">
<p>Day</p>
</div>
</div>
My preferred method is setting it as background image, with the background-size:contain (or cover). This applies logic from the browser instead of trying to get it right yourself and is fully responsive.
.exampleA, .exampleB{
width: 34%;
height: 150px;
background-position: center;
background-repeat: no-repeat;
background-color: pink; /* Just for this demo: to display canvas size */
border: 1px solid black; /* Just for this demo */
display: inline-block;
}
.exampleA {
background-size: contain;
}
.exampleB {
background-size: cover;
}
<div class="exampleA"
style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>
<div class="exampleB"
style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>
I’m using a grid layout. I used grid-template-column and grid-template-rows to define its structure. I want the first cell to contain an image. Since I want to center it horizontally, my idea was to place it inside a div which itself can be a flex or grid container.
I’m having problems scaling the image. When not using the div, I’m basically placing the image directly inside the grid, I can use height: 100%; and it scales down so that the height fits the cell.
But when using an extra div container that does not work anymore. Using height: 100% seems to reference the height of the whole grid layout, not just the div. Google says I should use max-height and max-width, but I can’t get it to work. Below is a simple test project (HTML and CSS) to show the problem. When using width: 25px; you can see, how big the sections of the grid should be.
I appreciate any help. Keep in mind, this is a simple test project, so don’t mind the naming of my classes and IDs.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.class {
background-color: blue;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 3fr 3fr;
gap: 10px;
background-color: green;
}
#image-container>img {
max-height: 100%;
}
<div class="container">
<div class="class" id="image-container">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
</div>
<div class="class" id="2">Good</div>
<div class="class" id="3">Day</div>
</div>
Background image really is the easiest way. Combined with the
Ah, yea. Forgot that that was an easy solution. Thanks for the help!
