How can I scale an image inside a div which is inside a grid?-CodePudding

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 >
  <div  id="image-container">
    <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
  </div>
  <div  id="2">Good</div>
  <div  id="3">Day</div>
</div>

CodePudding user response：

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.

.classA, .classB{
    width: 34%;
    height: 150px;
    background-color: pink; /* to display canvas size */
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid black;
}

.classA {
    background-size: contain;
}
.classB {
    background-size: cover;
}

<div 
     id="image-container" 
     style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>
        
<br />
<br />
<br />
        
<div 
     id="image-container" 
      style="background-image: url('https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg');"
></div>

CodePudding user response：

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 >
  <div >
    <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="">
  </div>
  <div >
    <p>Good</p>
  </div>
  <div >
    <p>Day</p>
  </div>
</div>