How to limit image size and set maximum height and width that fits the screen size?

[fa2020]

Hi,
In the following html/css code, when I click on an image that has a high resolution (1000*2500) the image appears zoomed and out of the screen. How can I make them fit on the screen when the image size is high enough?

<div style="display:none;" id="<?php echo $nID; ?>" class="bFulIm">
<button id="closeBTNs" onClick='shBC()'>CLOSE</button>
<img src="files/<?php echo $URL; ?>">
</div>

.bFulIm {
width: 90vw;
}
.bFulIm img{
width: 100%;
-webkit-box-shadow: 0px 4px 33px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 4px 33px 0px rgba(0,0,0,0.3);
box-shadow: 0px 4px 33px 0px rgba(0,0,0,0.3);
}
.bFulIm { /*that's the big image preview*/
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
max-height: 100%;
}

 

[Jim_Wick]

Hi, I got your issue..
Let me try to help you out with this..
You can try changing CSS as shown below..

position: absolute;
width: 100%;
height: 100%;
overflow: hidden;

This will help any of your images to fit in your screen size..

Hope this help,
Regards,
Jim W

 

[cdsk15]

if there is a <style> tag ,type tagname{max-width:???%;max-height:???%;}