IMPORTANT UPDATE: After realizing there are numerous scenarios where my desired functionality may be needed with different specifications, I need to outline my specific case. Essentially, I am utilizing this image popup (view code here).
If you resize the window while a popup is open, you'll notice that the popup does not adjust its size accordingly, leading to a subpar user experience especially in landscape mode on smartphone devices.
I aim to make my popup resize based on both the width and height of the screen without distorting the aspect ratio of the image (maintaining its square shape).
These are the alterations I have implemented so far:
.focus {
z-index: 10;
max-width: 500px;
max-height: 500px;
display: none;
}
.focus.enabled .container {
max-width: 500px;
max-height: 500px;
}
Testing it via this link using Firebug makes the image responsive when reducing the width, but not when adjusting the height of the window. How can I ensure responsiveness in both dimensions while preserving the image's aspect ratio?
----------- Previous inquiry (archived for reference): ----------------
I want to confine an element (specifically a picture) with maximum dimensions of 500x500 within the browser window while maintaining its aspect ratio intact. Here is sample HTML:
<html>
<head>
</head>
<body>
<img src="myimage.png" class="image" />
</body>
</html>
Accompanied by CSS:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
width: 100%;
}
With this CSS, the image remains inside the window but warps when either dimension of the window shrinks below 500px. To preserve the ratio, one of the two 100% directives needs to be removed:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
/*width: 100%;*/
}
However, removing one of these renders the ratio correct, but leads to cropping of the image when the window width falls below 500px! What straightforward CSS solution exists for this fundamental issue?