溢出隐藏我的图像

我试图使图像库与可打开的图像，但问题是当图像打开和监视器或浏览器窗口高度小，图像的顶部是隐藏的。任何具有溢出属性的选项都不适用于我。我现在的代码示例如下。任何建议如何解决或我做错了什么？溢出隐藏我的图像

function openModal() { 
 
    document.getElementById('myModal').style.display = "flex"; 
 
    document.body.style.overflow = "hidden"; 
 
} 
 

 
function closeModal() { 
 
    document.getElementById('myModal').style.display = "none"; 
 
    document.body.style.overflow = "visible"; 
 
} 
 

 
var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    
 
    if (n > slides.length) {slideIndex = 1} 
 
    if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    
 
    slides[slideIndex-1].style.display = "flex"; 
 
\t var modal = document.getElementById("modalContent"); 
 
    \t var divImg = slides[slideIndex-1]; 
 
\t var img = divImg.getElementsByTagName('img')[0]; 
 
\t var imgWidth = img.width; 
 
\t var imgHeight = img.height; 
 
\t modal.style.width = imgWidth + "px"; 
 
\t modal.style.height = imgHeight + "px"; 
 
\t 
 
    document.onkeydown = function(x) { 
 
\t \t if (document.getElementById('myModal').style.display == "flex") { 
 
\t \t x = x || window.event; 
 
\t \t if (x.keyCode == '37') { 
 
\t \t \t plusSlides(-1) 
 
\t \t } else if (x.keyCode == '39') { 
 
\t \t \t plusSlides(1) 
 
\t \t } 
 
\t } 
 
    } 
 
}

/* Center gallery */ 
 
.row { 
 
\t margin: 0 auto 30px; 
 
\t text-align: center; 
 
} 
 

 
/* Padding in gallery */ 
 
.row > .column { 
 
    padding: 16px 8px; 
 
} 
 

 
.column { 
 
    width: 320px; 
 
    height: 320px; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 4; 
 
\t 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
\t 
 
\t overflow: auto; 
 
    background-color: rgba(0,0,0,0.9); 
 
} 
 

 
/* Modal Content */ 
 
.modal-content { 
 
    position: relative; 
 
    margin: 0 auto ; 
 
    padding: 0; 
 
\t align-self: center; 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    color: white; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 25px; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
} 
 

 
/* Close hover */ 
 
.close:hover, 
 
.close:focus { 
 
    color: #999; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
/* Slide iamge */ 
 
.mySlides { 
 
    display: none; 
 
    justify-content: center; 
 
} 
 

 
/* Pointer cursor */ 
 
.cursor { 
 
    cursor: pointer 
 
} 
 

 
/* Next & previous buttons */ 
 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    padding: 16px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
/* Position the "next button" to the right */ 
 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 
/* Number text (1/3 etc) */ 
 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 12px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
/* Removing white line on bottom of image in gallery */ 
 
.mySlides img { 
 
    width: auto !important; 
 
\t max-height: 720px; 
 
\t max-width: 720px; 
 
} 
 

 
/* Shadow and opacity animation */ 
 
img.hover-shadow { 
 
    transition: 0.4s; 
 
} 
 
/* Shadow and opacity of gallery image */ 
 
.hover-shadow:hover { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    opacity: 0.8; 
 
}

<div class="row"> 
 
\t <div class="column"> 
 
\t \t <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="http://www.qygjxz.com/data/out/114/5838619-image.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" style="width:100%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" style="width:100%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor"> 
 
\t </div> 
 
\t <div class="column"> 
 
\t \t <img src="https://www.w3schools.com/w3css/img_avatar3.png" style="width:100%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor"> 
 
\t </div> 
 
</div> 
 

 
<!--Modal image slide show--> 
 
<div id="myModal" class="modal"> 
 
\t <span class="close cursor" onclick="closeModal()">&times;</span> 
 
\t <div class="modal-content" id="modalContent"> 
 

 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">1/8</div> 
 
\t \t \t <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">2/8</div> 
 
\t \t \t <img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">3/8</div> 
 
\t \t \t <img src="http://www.qygjxz.com/data/out/114/5838619-image.png" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">4/8</div> 
 
\t \t \t <img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">5/8</div> 
 
\t \t \t <img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">6/8</div> 
 
\t \t \t <img src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">7/8</div> 
 
\t \t \t <img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" style="width:100%"> 
 
\t \t </div> 
 
\t \t <div class="mySlides"> 
 
\t \t \t <div class="numbertext">8/8</div> 
 
\t \t \t <img src="https://www.w3schools.com/w3css/img_avatar3.png" style="width:100%"> 
 
\t \t </div> 
 
\t \t \t <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
\t \t \t <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 
\t \t </div> 
 
\t </div> 
 
</div>

来源

2017-07-18 Marek

你究竟想达到什么目的？图像模式打开时，您不希望滚动条出现吗？ – Lansana

当您以小高度打开图像时，图像的顶部被隐藏，我想看到它 – Marek

一号线修复：从.mySlides img CSS删除width: auto!important。

然后当模式打开时，图像将缩放到屏幕宽度。

编辑：更改display: flex为display: block在您的模式。这可以解决您在较小高度屏幕上的高度问题。但是现在你的内容不是垂直居中。您正试图在其他方面使用flexbox，并不意味着这一点。这就是为什么你会得到奇怪的行为。

为了缓解此问题，使用媒体查询或javascript明确设置在较小的屏幕高度的display: flex到display: block，因为垂直对齐没有意义有反正因为图像总是会比屏幕高度。

这给你两全其美：

在大屏幕上时，图像模式垂直居中
在较小的屏幕，图像不会顶部被切断像以前一样，垂直居中并不重要。您可以添加一个小的margin-top或其他东西，以在屏幕顶部和图像之间添加一些空间。

来源

2017-07-18 12:07:31 Lansana

当我这样做时，图像的顶部将仍然隐藏在很小的高度，并且图像看起来像打喷嚏 – Marek

调整你的最大高度/最大宽度和父元素样式来解决这个问题。但是在较小的屏幕上溢出宽度的问题可以通过删除'width：auto！important'来解决。如果有一个小提琴我可以为你做，我不熟悉SO代码片段。 – Lansana

我没有溢出宽度的问题。当我在监视器或浏览器窗口中打开图像时，我遇到了问题：高度小于图像高度，然后图像的顶部将被隐藏，我希望看到它。 – Marek

我不能发表评论，但（请不要downvote，并在必要时^^

那么从片段我要说的是，请复制粘贴此作为注释Overflow: hidden;财产.column可能会导致一些麻烦尝试删除它或将其设置为Overflow: scroll;

编辑：该Overflow: ;必须是Overflow-x: ;或Overflow-y: ;，具体取决于轴。

编辑：document.body.style.overflow = "hidden";在openmodal功能可能还需要正确的轴（我不擅长的功能，但它是值得一试的^^）

来源

2017-07-18 11:50:42 D3nj1

您的第二次编辑：在那里有一个功能？：P – Lansana

@Lansana 'function openModal（）{ document.getElementById（'myModal'）。style.display =“flex”; document.body.style.overflow =“hidden”; }'那个函数^^ – D3nj1

我看，我以为你是指代码本身的特定行，因为它是的一个声明。 – Lansana

溢出隐藏我的图像

回答

相关问题