1
我需要一些幫助，當在模式中顯示圖像時，我希望圖像可以上下縮放以保持其比例。CSS模式圖像
如果圖像比窗口小則表明這一切
如果圖像比窗口大放大盡可能填滿窗口保持規模（不滾動）
而且我想打開模式時，網站的主體較暗，無法滾動，但我無法想象如何去做。這裏是我的HTML和CSS代碼（我知道這不小的分辨率時工作得很好，但現在不是我要求的）：
html, body {
width: 100%;
height: 100%;
margin: 0;
}
h1, h4{
color:#0B486B;
}
#container {
margin: 0;
padding: 0 3% 0 3%;
width: 100%;
height: 100%;
background-color: #E0E4CC;
}
#footer {
text-align: center;
padding: 10px;
width: 100%;
height: 100px;
background-color: #E0E4CC;
}
#sidebar {
padding-top: 10%;
height: 100%;
background-color: #69D2E7;
text-align: center;
}
#btngroup {
padding-top: 20%;
}
#grid {
padding: 0 2% 2% 2%;
height: 100%;
background-color: #A7DBD8;
}
#gridrow {
padding: 3% 0 0 0;
height:50%;
}
#gridcol {
height:100%;
position: relative;
}
img {
opacity: 1;
cursor: pointer;
max-width: 92%;
max-height: 92%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img:hover {
opacity: 0.8;
}
#myModal {
display: none;
}
#modalDialog {
margin: auto;
}
#modalContent {
height: 100%;
width: 100%;
}
#modalBody {
padding:3px;
}
#imgModal {
max-width: 100%;
max-height: 100%;
cursor: default;
opacity: 1;
position: relative;
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="row">
<div id="sidebar" class="col-md-3 sidenav">
<h1>HELLO<br>WORLD</h1>
<ul id="btngroup" class="nav nav-stacked">
<li><a href="#section1"><h4>Pictures</h4></a></li>
<li><a href="#section2"><h4>Music</h4></a></li>
<li><a href="#section3"><h4>About me</h4></a></li>
</ul><br>
</div>
<div id="grid" class="col-md-9">
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://www.avionslegendaires.net/wp-content/uploads/images/dossier/F-15-leurre-thermique.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://img.171u.com/image/1609/2607005498770.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="http://www.tappingforabundance.com/wp-content/uploads/slider1.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" onclick="this.style.display='none'">
<div id="modalDialog" class="modal-dialog">
<!-- Modal content-->
<div id="modalContent" class="modal-content" style="background-color:#000000">
<div id="modalBody" class="modal-body">
<img id="imgModal" class="img-rounded" />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("imgModal").src = element.src;
document.getElementById("myModal").style.display = "flex";
}
</script>
</body>
</html>
關於滾動部分，我只在模態顯示時需要它，我試着用JS分配它，但我沒有成功，你能告訴我一個解決方案嗎？ – GiLA3