[SOLVED] How can we use TailwindCSS to proportionally scale an image to always fit within the viewport?

How can we use TailwindCSS to proportionally scale an image to always fit within the viewport?

We would like to use TailwindCSS to proportionally scale an image (i.e. without altering the aspect ratio) such that the image is fully visible "above the fold", horizontally and vertically centered, and has a configurable amount of padding between the image and sides of the window.

For example, say we have some code which looks like this (Tailwind Playground):

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />

<html lang="en" class="min-h-screen bg-gray-50">
  <body class="min-h-screen">
    <div class="flex flex-col items-center justify-center">
      <div class="flex min-h-screen sm:px-12 py-8">
        <img class="h-auto max-w-full drop-shadow-md sm:rounded-md" src="https://via.placeholder.com/1500x2500" alt="" />
      </div>
    </div>
  </body>
</html>

Here the image needs to be resized such that its height is not larger than the available screen. Additionally there should be padding between the image and sides of the screen. (The sm breakpoint can be ignored; this is more important for larger screens.)

Ideally this will be achieved using only CSS (Tailwind specifically), however if necessary JavaScript is an option.

Solution

Use .h-screen on the parent to your img. Then on your image use .object-scale-down with max-h-full and m-auto.

Tailwind Play.

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />

<html lang="en" class="bg-gray-50">

<body>
  <div class="flex justify-center sm:px-12 p-8 h-screen">
    <img class="object-scale-down max-h-full drop-shadow-md rounded-md m-auto" src="https://dummyimage.com/600x400/000/fff" alt="" />
  </div>
</body>

</html>