-1

I have set of pictures in different sizes displayed in css-grid.

How to display all the pictures to be display in 1.6 aspect radio?

In my code I need to have three columns in row. grid-template-columns:1fr 1fr 1fr;.

But the pictures are changing the item size and not in right aspect radio and I have a lot of white space in the picture.

What is missing in my code?

Here is the code: 

.wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.wrap .item {
  border: 1px solid red;
  overflow: hidden;
}
.wrap .item img {
  height: auto;
  width: auto;
  max-width: 270px;
  max-height: 180px;
}
<div class="wrap">
  <div class="item"><img src="https://picsum.photos/id/562/500/300"></div>
  <div class="item"><img src="https://picsum.photos/id/588/500/500"></div>
  <div class="item"><img src="https://picsum.photos/id/563/400/350"></div>
  <div class="item"><img src="https://picsum.photos/id/564/500/400"></div>
  <div class="item"><img src="https://picsum.photos/id/565/300/300"></div>
  <div class="item"><img src="https://picsum.photos/id/566/270/180"></div>
</div>
Jon Sud
  • 10,211
  • 17
  • 76
  • 174
  • just edited.... – Jon Sud Sep 02 '19 at 14:34
  • Good, thank you for the edit. My gut feeling is you need to change them from image elements, and instead make them background images within the `
    ` with a `background-size:cover`. Although it doesn't feel like a great solution, so I'm resisting making it an actual answer
     – freefaller Sep 02 '19 at 14:38
  • I can't change the html.. it must be have img tag – Jon Sud Sep 02 '19 at 14:39
  • Check this out: https://stackoverflow.com/a/26967278/930393 – freefaller Sep 02 '19 at 14:42
  • If the images are different sizes, then `grid` is not a good option for laying them out....because it won't be a grid. – Paulie_D Sep 02 '19 at 14:45

2 Answers2

0

Create a separate rule for img tag and specify how the image should fit the div elements via object-fit

.wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.wrap .item {
  border: 1px solid red;
  overflow: hidden;
}
.wrap .item {
  height: auto;
  width: auto;
  max-width: 270px;
  max-height: 180px;
}

img {
   width: 100%,
   height: 100%,
   object-fit: cover


}
<div class="wrap">
  <div class="item"><img src="https://picsum.photos/id/562/500/300"></div>
  <div class="item"><img src="https://picsum.photos/id/588/500/500"></div>
  <div class="item"><img src="https://picsum.photos/id/563/400/350"></div>
  <div class="item"><img src="https://picsum.photos/id/564/500/400"></div>
  <div class="item"><img src="https://picsum.photos/id/565/300/300"></div>
  <div class="item"><img src="https://picsum.photos/id/566/270/180"></div>
</div>
Charlie
  • 22,886
  • 11
  • 59
  • 90
  • sorry but its not good enough. the pictures are have space between which is not good. the picture can be grow by this parent div but still keep radio 1.6 – Jon Sud Sep 02 '19 at 14:53
  • 1
    @JonSud I don't see any space between the pictures when I run the snippet. Every picture fits to the container perfectly. Now the problem is, that you cannot have both a specific aspect ration and a container outside the very aspect aspect ratio - and no white space. – Charlie Sep 02 '19 at 14:57
  • click on "expand snippet" and play with the size of the chrome. you will see – Jon Sud Sep 02 '19 at 14:58
  • I see. Now, ween the browser is shrink ed, what is the expected output? – Charlie Sep 02 '19 at 15:01
  • three columns in row inside each col have img with display of 1.6 aspect-radio. without space between the columns, please – Jon Sud Sep 02 '19 at 15:02
  • But this will introduce white space when shrinking - because the images will have to stick to a specific dimension regardless of the container side. – Charlie Sep 02 '19 at 15:03
  • correct. I think in shrink under the picture height it will be okay to have white space. I think. but the idea is the column should be have the aspect radio in the picture should be fit inside right? – Jon Sud Sep 02 '19 at 15:06
0

Determine the size in the grid

I use object-fit: cover; to cover ther size, you can use also object-fit: cotain; but you may see blank areas

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 270px);
  grid-template-rows: repeat(2, 180px);
}
.wrap .item {
  border: 1px solid red;
  overflow: hidden;
}
.wrap .item img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}
<div class="wrap">
  <div class="item"><img src="https://picsum.photos/id/562/500/300"></div>
  <div class="item"><img src="https://picsum.photos/id/588/500/500"></div>
  <div class="item"><img src="https://picsum.photos/id/563/400/350"></div>
  <div class="item"><img src="https://picsum.photos/id/564/500/400"></div>
  <div class="item"><img src="https://picsum.photos/id/565/300/300"></div>
  <div class="item"><img src="https://picsum.photos/id/566/270/180"></div>
</div>

Use vw OR %

You can use also with vw to change size:

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 32vw);
  grid-template-rows: repeat(2, 20vw);
  grid-template-columns: repeat(3, 33.33333%);
  grid-template-rows: repeat(2, 22.2222%);
}
.wrap .item {
  border: 1px solid red;
  overflow: hidden;
}
.wrap .item img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}
<div class="wrap">
  <div class="item"><img src="https://picsum.photos/id/562/500/300"></div>
  <div class="item"><img src="https://picsum.photos/id/588/500/500"></div>
  <div class="item"><img src="https://picsum.photos/id/563/400/350"></div>
  <div class="item"><img src="https://picsum.photos/id/564/500/400"></div>
  <div class="item"><img src="https://picsum.photos/id/565/300/300"></div>
  <div class="item"><img src="https://picsum.photos/id/566/270/180"></div>
</div>

After comments

You can do like this, not much clear

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.wrap .item {
  border: 1px solid red;
  overflow: hidden;
  height: 22vw;
}
.wrap .item img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}
<div class="wrap">
  <div class="item"><img src="https://picsum.photos/id/562/500/300"></div>
  <div class="item"><img src="https://picsum.photos/id/588/500/500"></div>
  <div class="item"><img src="https://picsum.photos/id/563/400/350"></div>
  <div class="item"><img src="https://picsum.photos/id/564/500/400"></div>
  <div class="item"><img src="https://picsum.photos/id/565/300/300"></div>
  <div class="item"><img src="https://picsum.photos/id/566/270/180"></div>
</div>
Omer
  • 3,232
  • 1
  • 19
  • 19