-1

I coded an image optimization helper called sharp-watch that generates metadata for images including their aspect ratio and blurhash.

I would like images to be responsible which works by default for img tags (when width is set to 100%, height is set using image aspect ratio).

Problem is the aspect ratio is only know once image is downloaded. Given I know the aspect ratio ahead of time (using sharp-watch metadata), is it possible to set width to 100% and height using aspect ratio from metadata using CSS (not JavaScript)?

I need to set the height to display blurhash while image loads.

sunknudsen
  • 6,356
  • 3
  • 39
  • 76

1 Answers1

1

You can do it by Aspect Ratio like below

.container {
   background-color: red;
   position: relative;
   width: 100px;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
<div class="container"> 
</div>
Try to change padding-top and you will get different result

For more detail check this

ARZMI Imad
  • 950
  • 5
  • 8