Question 301551 in Html Question posted in
Some basic documentation can be found here.

Html – Why does the picture extend beyond the block?

I specified max-height: 400px for the whole grid. But child elements are out of bounds, although they should be stretched by height relative to the size of the parent.

demo

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
  </div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
Tags:

2

Answers


  1. 0

    Your grid will correctly adjust in size until it reaches a vertical height of 400px. When your grid hits that height it stops growing in height, but not in width. This results your images continuing to grow as they don’t respect the containers max height of 400px.

    Setting a max-width as well will stop the container from growing when it reaches a height of 400px. In this specific case it’s a max-width: 850px; that does it.

    Example of it working

    Login or Signup to reply.
  2. 0

    use
    .grid__col { height: 190px; (400(maxwidth)/2-10(gap)=190px) }

    instead of
    .grid__col { height: 100%; }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search