0

I have a tricky layout to solve with a grid of images, the first row runs as 4 blocks of 25% across, the second will have 3 blocks with 2 x 25% blocks and 1 image taking up 50% of the remaining space.

I have the layout working fine I just need to lock the 50% blocks height to the same as the 25% blocks and constrain the image using object-fit.

However no matter what I try the larger image inside the 50% block is growing to the natural height of the image based on its aspect ratio.

codepen here

https://codepen.io/alexmorris/pen/jOQyMrj/c19404fb6ed4745044b77cd8fe4b3bee

    *, html {
      box-sizing:border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica     neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
      margin:0;
      padding:0;
    }

    img {
      width:100%;
      height:auto;
    }

    section {
      display:flex;
      flex-wrap:wrap;
      flex-direction:row;
      align-items:flex-start;
    }

    div {
      flex: 0 0 25%;
    }

    div:nth-child(7) {
      flex: 0 0 50%;
      align-self: start;
    }

    div:nth-child(7) img {
      object-fit:cover;
      height:100%;
      object-position:center;
    }

Have tried all variations of flex-shrink to no avail

alex morris
  • 9
  • 1

1 Answers1

0

Just add a height:700px; on your images

*, html {
  box-sizing:border-box;
}

html, body {
  height:100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  margin:0;
  padding:0;
}

img {
  width:100%;
  height:auto;
  height:700px;
}

section {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  
  align-items:flex-start;
}

div {
  flex: 0 0 25%;
}

div:nth-child(7) {
  flex: 0 0 50%;
  align-self: start;
}

div:nth-child(7) img {
  object-fit:cover;
  object-position:center;
}
<section>
  
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>
  <div><img src="https://assets.codepen.io/66278/kam3.jpg" alt="" />
  <p>Some words go in here</p></div>

  
</section>
rrr63
  • 219
  • 9