'how to get the pop up images all the same size and in the centre

I have been asked to create an image gallery for a test website for a mini project at work with a few other people. I have created the gallery and the pop up images based on the code here: http://www.w3schools.com/howto/howto_css_modal_images.asp

The layout of the gallery itself is fine as there will be more images, but when I click on the images in the gallery, the images that pop up are all different sizes. We have been trying for a while now to give the images a fixed width and height to ensure that when they pop up they are all the same size and centred in the middle so that the user does not have to scroll up and down. Changing the width then results in the next and previous arrows being all over the place. We have made a few tweaks to the code but so far have been unable to get the desired result.

Can someone please point us in the right direction on how we can achieve this.

This is the code we have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>PRINTS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Style the Image Used to Trigger the Modal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
}

.image-container {
  width: 100%;
  height: 70%;
  columns: 4;
}

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    max-width: 100%;
    padding: 1px;
    }

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 100px;
  position: relative;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

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

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

/* Hide the slides by default */
.mySlides {
  display: none;
}
.image-wrapper {
  position: absolute;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 20px;
  margin-top: -50px;
  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;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* 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);
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.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);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: relative;
  top: 0;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}


</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Trigger the Modal -->
<div class="image-container">

<img class="myImg" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">

<img class="myImg" src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">

<img class="myImg" src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">

<img class="myImg" src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">

<img class="myImg" src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">

<img class="myImg" src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">

<img class="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">

<img class="myImg" src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">

</div> <!-- end image-container div -->

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
        <div class="numbertext"> 1 / 46</div>
        <img src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 2 / 46</div>
        <img src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 3 / 46</div>
        <img src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 4 / 46</div>
        <img src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 5 / 46</div>
        <img src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 6 / 46</div>
        <img src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 7 / 46</div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg">
    </div>
    <div class="mySlides">
        <div class="numbertext"> 8 / 46</div>
        <img src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg">
    </div>
    <!-- Next/previous controls -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

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

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");
  var dots = document.getElementsByClassName("demo");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>

html css image

Solution 1:^[1]

Try setting a max height on your images, max-height: 90vh; for example. VH units are the height of the viewport, so the images won't ever be taller than 90% of the viewport height in this instance. Then you can set the image widths to have max-width: 100%; and the user won't need to scroll. Also change your .mySlides CSS when the slide is active to use display: flex; rather than display: block; to allow you to center the image easily.

Try this adding these updated CSS rules:

.modal-content {
  width: 500px;
  max-width: 100%;
}

.mySlides img {
  max-height: 90vh;
  max-width: 100%;
}

When slide is active:

.mySlides {
  display: flex;
  flex-direction: column;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'how to get the pop up images all the same size and in the centre

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]