I am trying to display an image with caption that has the following properties:
- include a multi-line caption
- responsive: resize the image/caption to fill the screen size
- no scroll bar/overflow
- center the image/caption
- respect the aspect ratio of the image
- works with images in both portrait and landscape format
- have a border around the image and the caption
Here is a exemple:
The use-case would be to display the image in high-resolution in a modal after the user clicks on a thumbnail in an image gallery. That is why I included a parent div with semi-transparent background.
I have tried the following in Tailwind CSS, it works ok on Chrome but not on Firefox (latest versions):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="fixed inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75">
<figure class='bg-white rounded w-fit'>
<img class="object-contain h-5/6 w-fit p-2" src="https://images.unsplash.com/photo-1662328862542-a035c82b62c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80">
<figcaption class="text-center text-black w-fit m-auto">Legend <br> rest of the legend </figcaption>
</figure>
</div>
</body>