In my application, users can take photos either horizontally or vertically. These images are then displayed in a gallery on a webpage, and when clicked on, they expand using a Modal.
My issue arises with horizontal images looking smaller than vertical ones due to the CSS property max-width: 30vw. How can I adjust the width of horizontal images without affecting vertical ones?
Since the images are dynamic, assigning specific widths through classes is not an option.
This is the current CSS for the images:
.modal-content{
margin: auto;
display: block;
width: 100%;
max-width: 30vw;
max-height:85vh;
object-fit: cover;
}
And this is the setup for the modal:
<div id="myModal" class="modal">
<a class="btn btn-primary" id="btnDownload" download><i class="fa fa-download"></i> Download</a>
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
Here is a Vertical image example:
https://i.sstatic.net/va1EP.png
And here is a Horizontal image:
https://i.sstatic.net/y3SDw.png
This is the Javascript function I am using:
function AgrandaOpenModalr(img) {
var modal = document.getElementById("myModal");
// Insert the clicked image into the modal
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var btnDownload = document.getElementById('btnDownload');
modal.style.display = "block";
modalImg.src = img.src;
captionText.innerHTML = " ";
btnDownload.href = img.src;
// Close the modal when clicking on 'x'
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
}