0

So I've been doing some research regarding aspect ratios and I am not understanding it very well.

I need an aspect ratio of 5x4 and I know that there is a css prop named object-fit.

So I applied that to my image component.

.image {
  object-fit: cover;
  height: 200px;
  width: 100%
}

And that works good across screen resolutions.

But my question is; how do I achieve the 5x4 ratio? Like, what will be the height that I need to set to my component?

Non
  • 8,409
  • 20
  • 71
  • 123
  • 1
    you need to put the image inside a div and make that div 5x4 and the image stretched inside – Temani Afif Oct 04 '19 at 19:05
  • possible duplicate of : https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio / https://stackoverflow.com/q/11399194/8620333 – Temani Afif Oct 04 '19 at 19:07
  • Hi @TemaniAfif you didn't understand my question. My question is that one; how do I know what is 5x4? Like, what is the height that I need to achieve that. – Non Oct 04 '19 at 19:11
  • 1
    it means that the width will have 5 unit and the height only 4 unit so 1unit = height/4 and 1unit = width/5 ---> height = (4/5)*width and since you cannot express height based on width, you have the padding trick like explained in the question I linked.(ex padding-top: 80% ) – Temani Afif Oct 04 '19 at 19:14

0 Answers0