What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

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

fa2020

New member
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%;
}
 
Top