Question

在模态中显示图像时我需要一些帮助，我希望图像按比例放大和缩小，保持其比例。

如果图像小于窗口，则显示全部

如果图像大于窗口，请尽量放大以填充窗口维持比例（不滚动）

此外，我想让网站的主体更暗，并且在打开模态时无法滚动，但我无法知道如何操作。这是我的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>

Answer 1

.doNotScroll{
 overflow: hidden;
 height: 100%;
}

....
$(document).on('click', '.img-rounded', function(){
    $('BODY, HTML').addClass('doNotScroll');
})

...

$(document).on('click', '#myModal', function(){
    $('BODY, HTML').removeClass('doNotScroll');
})

Answer 2

禁用滚动正文：

BODY,HTML{
 overflow: hidden;
 height: 100%;
}

对于深色背景，将div直接放在体内：

DIV.cover.inactiv{ 
 display: none; 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5);
 z-index: 10 // play with it
}

DIV.cover.activ{
 display: block;
}

CSS模态图像

2 个答案: