Überlauf versteckt mein Bild

Ich versuche, Bildergalerie mit zu öffnenden Bild zu machen, aber das Problem ist, wenn ein Bild geöffnet und Monitor oder Browser Fenster Höhe ist klein, ist die Oberseite des Bildes versteckt. Jede Option mit Überlaufeigenschaft funktioniert nicht für mich. Mein aktueller Code zu Beispiel ist unten. Irgendwelche Vorschläge zur Behebung oder was mache ich falsch?Überlauf versteckt mein Bild

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>

Quelle

2017-07-18 Marek

Was genau versuchen Sie zu erreichen? Soll die Bildlaufleiste nicht angezeigt werden, wenn das Bildmodal geöffnet ist? – Lansana

Wenn Sie das Bild in geringer Höhe öffnen, ist die obere Seite des Bildes ausgeblendet und ich möchte es sehen. – Marek

Eine Zeile fix: entfernen width: auto!important vom .mySlides img CSS.

Dann wird das Bild auf die Bildschirmbreite skaliert, wenn das Modal offen ist.

EDIT: Ändern display: flex zu display: block auf Ihrem modal. Dies löst Ihr Höhenproblem auf kleineren Bildschirmen. Aber jetzt ist dein Inhalt nicht vertikal zentriert. Sie versuchen, Flexbox inmitten anderer Dinge zu verwenden, und das ist nicht dafür gedacht. Das ist der Grund, warum Sie seltsames Verhalten bekommen. Um dieses Problem zu beheben, verwenden Sie eine Medienabfrage oder Javascript, um die display: flex auf kleinere Bildschirmhöhen explizit auf display: block zu setzen, da die vertikale Ausrichtung sowieso nicht sinnvoll ist, da das Bild immer größer als die Bildschirmhöhe ist.

Dies gibt Ihnen das Beste aus beiden Welten:

Auf großen Bildschirmen wird das Bild modal vertikal
Auf kleineren Bildschirmen zentriert, das Bild nicht wie vor auf der Oberseite abgeschnitten und eine vertikale Zentrierung spielt keine Rolle. Sie können eine kleine margin-top oder etwas hinzufügen, um etwas Abstand zwischen dem oberen Bildschirmrand und dem Bild hinzuzufügen.

Quelle

2017-07-18 12:07:31 Lansana

Wenn ich es mache, ist die obere Seite des Bildes immer noch auf kleiner Höhe versteckt, und das Bild wird aussehen a niesen – Marek

Passen Sie Ihre Max-Höhe/Max-Breite und Elternelement-Stile, um dies zu beheben. Aber das Problem der überlaufenden Breite auf kleineren Bildschirmen wird durch das Entfernen von "width: auto! Wichtig" gelöst. Wenn es eine Geige geben würde, könnte ich das für dich machen, ich kenne die SO-Code-Schnipsel nicht. – Lansana

Ich habe kein Problem mit Überlaufbreite. Ich habe ein Problem, wenn ich Bild auf Monitor oder Browserfenster öffne, dass HEIGHT weniger Thane Bildhöhe ist, dann wird die obere Seite des Bildes versteckt und ich will es sehen. – Marek

Ich kann noch nicht kommentieren (Bitte downvote nicht und bitte dies als Kommentar einfügen, wenn nötig ^^

Gut aus dem Snippet würde ich sagen, dass die Overflow: hidden; Eigenschaft in .column könnte einige Probleme versuchen, verursachen sie zu löschen oder sie auf Overflow: scroll;

Edit: Die Overflow: ; hat entweder 01 seinoder Overflow-y: ; abhängig von der Achse.

Edit: document.body.style.overflow = "hidden"; in Ihrer openmodal Funktion Möglicherweise müssen auch die richtige Achse (ich bin an Funktionen schlecht, aber es ist einen Versuch wert ^^)

Quelle

2017-07-18 11:50:42 D3nj1

Ihre zweite Bearbeitung: Wo gibt es eine Funktion in dieser Zeile? : P – Lansana

@Lansana 'Funktion openModal() { document.getElementById ('myModal'). Style.display =" flex "; document.body.style.overflow = "versteckt"; } 'Diese Funktion ^^ – D3nj1

Ich sehe, ich dachte, Sie beziehen sich auf die spezifische Zeile des Codes selbst, da es eine Aussage ist. – Lansana

Überlauf versteckt mein Bild

Antwort

Verwandte Themen