REACTJS - 3 grid based boxes of size 16:9 , display picture distorting

Question

3 grid based boxes of size 16:9 covering whole width of page should display picture in this divisions without compressing/distorting also showing the full picture. If the picture is bigger than the box then it should cover full width or full height depending on which dimension is larger and accordingly resize the other dimension.

My first issue is : I give 100% width to each of the div inside the grid, but how much should i assign the height dimension?

Second : Assuming i have the divisions according to my requirements, how do i display the picture inside the division?.

Current progress: i have used this website for reference: dabblet and used code where thumbnail-card is my div and thumbnail is my image.

.thumbnail-card {
  height: 300px;
  width: 100%;
  background-color: black;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.thumbnail-card:before {
  content: "";
  width: 1px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: -1px;
}

.thumbnail {
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

but vertically long images don't behave as i need. Any solutions? Pics for reference: vertical_pic horizontal_pic how it looks

Niek Nijland · Answer 1 · 2018-11-29T12:39:28.140

0

Your first issue:

To retrieve a constant 16:9 ratio of your div element you should not use height, but use padding-bottom. Translate the 16:9 ratio to percentages. In your case the width is 100%. Then to calculate the padding-bottom do: 9 / 16 * 100 is 56,25% of 16.

Like this:

div {
  width: 100%;
  padding-bottom: 56,25%;
}

Also see this stack overflow post: Maintain the aspect ratio of a div with CSS

Your second issue:

I think object-fit: contain; is what you need: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Use it on the image element and it will contain to its parent.

edited Nov 29 '18 at 12:39

answered Nov 28 '18 at 11:16

Niek Nijland

732
1
7
20

Many thanks! That helped me solve my 2nd issue.Only my 1st issue is left. – archelaus Nov 28 '18 at 11:48
You alsways want them to have a 16:9 ratio? There is a trick for that. I will update my answer. – Niek Nijland Nov 29 '18 at 12:34
Let me know if the second part of your question still works when you use the `padding-bottom` solution. – Niek Nijland Nov 29 '18 at 12:42
i removed height attribute in my css,and gave padding-bottom, also put object-fit. This is how it looks - https://imgur.com/a/2YdvHCw – archelaus Nov 30 '18 at 13:20
Can you create a jsfiddle or code snippet in your question so I can check and help you? – Niek Nijland Dec 01 '18 at 15:45

REACTJS - 3 grid based boxes of size 16:9 , display picture distorting

1 Answers1