innerWidth/innerHeight e clientWidth/clientHeight
<!DOCTYPE html>
<html>
<head>
<style>
.zoomIn{
position:fixed;
display:block;
top:0;
left:0;
text-align:center;
background-color:#ccc;
width:100%;
height:100%;
z-index:2;
}
img#imgZoomId{
display:inline-block;
vertical-align:middle;
cursor:zoom-out;
}
.dummy{
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;}
.zoomOut{
position:absolute;
display:none;
height:0;
z-index:-2;
visibility:hidden;
}
.imgFitH{
height:96%;
}
.imgFitV{
width:96%;
}
</style>
<script>
function zoomOut()
{
document.getElementById("imgZoomContainerId").className="zoomOut";
}
function fnct_imgFit(id)
{
let wndW = window.innerWidth;
let wndH = window.innerHeight;
let img = document.getElementById(id);
let imgW = img.clientWidth;
let imgH = img.clientHeight;
if(imgW/imgH>wndW/wndH)
{
document.getElementById("imgZoomId").className="imgFitV";
}
else
{
document.getElementById("imgZoomId").className="imgFitH";
}
}
</script>
</head>
<body>
<div id="imgZoomContainerId" class="zoomOut">
<div class="dummy"></div>
<img id="imgZoomId" src="" class="">
</div>
<img id="img1" src="img/img1.jpg" style="height:70px;cursor:zoom-in;">
<img id="img2" src="img/img2.jpg" style="height:70px;cursor:zoom-in;">
<script>
function zoomIn1()
{
document.getElementById("imgZoomId").src="img/img1.jpg";
fnct_imgFit("img1");
document.getElementById("imgZoomContainerId").className="zoomIn";
}
function zoomIn2()
{
document.getElementById("imgZoomId").src="img/img2.jpg";
fnct_imgFit("img2");
document.getElementById("imgZoomContainerId").className="zoomIn";
}
document.getElementById("imgZoomId").addEventListener("click", zoomOut);
document.getElementById("img1").addEventListener("click", zoomIn1);
document.getElementById("img2").addEventListener("click", zoomIn2);
</script>
</body>
</html>
