Overflow hiding my image

Question

I try to make image gallery with openable image, but the problem is when a image is opened and monitor or browser window height is small, the top side of image is hidden. Any option with overflow property does not work for me. My current code to example is below. Any suggestions how to fix or what I do wrong ?

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";
	var modal = document.getElementById("modalContent");
  	var divImg = slides[slideIndex-1];
	var img = divImg.getElementsByTagName('img')[0];
	var imgWidth = img.width;
	var imgHeight = img.height;
	modal.style.width = imgWidth + "px";
	modal.style.height = imgHeight + "px";
	
  document.onkeydown = function(x) {
		if (document.getElementById('myModal').style.display == "flex") {
		x = x || window.event;
		if (x.keyCode == '37') {
			plusSlides(-1)
		} else if (x.keyCode == '39') {
			plusSlides(1)
		}
	}
  }
}

/* Center gallery */
.row {
	margin: 0 auto 30px;
	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;
	
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	
	overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: 0 auto ;
  padding: 0;
	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;
	max-height: 720px;
	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;
}

Lansana Camara · Accepted Answer

One line fix: remove width: auto!important from the .mySlides img css.

Then the image will scale to the screen width when the modal is open.

EDIT: Change display: flex to display: block on your modal. This solves your height problem on smaller height screens. But now your content is not vertically centered. You are trying to use flexbox in the midst of other things, and it is not meant for that. This is why you are getting strange behavior.

To mitigate this problem, use a media query or javascript to explicitly set the display: flex to display: block on smaller screen heights, because vertically aligning doesn't make sense there anyways since the image will always be greater than the screen height.

This gives you the best of both worlds:

On large screens, the image modal is vertically centered
On smaller screens, the image will not be cut off on the top like before, and vertically centering doesn't matter. You can add a small margin-top or something to add some space between top of screen and image.

Overflow hiding my image

Answers (2)

Related Questions