Images not adjusting inside the grid-CodePudding

I got 2 columns grid with following layout:

My issue is that when I use images inside the right column (1 image inside each box)..Images overflow and whole grid kind of acts weird.

It looks something like this:

Codepen Link: https://codepen.io/kazmi066/pen/MWXGgaL?editors=1100

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: green;
  width: 100%;
  max-height: 70vh;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.col1 {
  height: 100%;
  background: red;
}

.col2 {
  height: 100%;
  background: orange;
}

.box1 {
  width: 100%;
  height: 50%;
  border: 1px solid black;
}

.box2 {
  width: 100%;
  height: 50%;
  border: 1px solid blue;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div >
  <div ></div>
  <div >
    <div ><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property"/></div>
    <div ><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
  </div>
</div>

I want the images to adjust inside the boxes perfectly without the need of custom height and width so that any size of image can work in this scenario.

CodePudding user response：

fit would be object-fit: contain; for the image not cover.

but if the ratio of the image is not the ratio of the box, you'll have blank

you can put the image in background of box1, box2... with a background size cover. It will cover entirely and clipped the overflow. If box ratio "totally" different of the image, lot of image can be clipped, but it's not so often.

CodePudding user response：

I've found a way, only CSS, nothing is changed in your HTML

2 points:

1- it's using clip-path 2- image fill box space, but are clipped otherwise blank space

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: green;
  width: 100%;
  max-height: 70vh;
  display: grid;
  gap: 2vh;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-template-rows: 100%;
}

.col1 {
  background: red;
}

.col2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 34vh 34vh;
  background: orange;
  justify-content: center;
}

.box1 {
  width: 100%;
  border: 1px solid black;
  clip-path: inset(0);
}

.box2 {
  width: 100%;
  border: 1px solid blue;
  clip-path: inset(0);
}

img {
  width: 100%;
  object-fit: contain;
}

<div >
  <div ></div>
  <div >
    <div ><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
    <div ><img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8&w=1000&q=80" alt="property" /></div>
  </div>
</div>

based on your grid max-height in vh, I defined all others same kind of values in vh. Lot more consistent and avoid some little strange pixels or lines here or there depending of window size.

I put a nested grid inside col2 where box1 box2 go. box have a clip-path with inset 0, meaning clipping everything out.