溢出隱藏我的圖像

我試圖使圖像庫與可打開的圖像，但問題是當圖像打開和監視器或瀏覽器窗口高度小，圖像的頂部是隱藏的。任何具有溢出屬性的選項都不適用於我。我現在的代碼示例如下。任何建議如何解決或我做錯了什麼？溢出隱藏我的圖像

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

溢出隱藏我的圖像

回答

相關問題