Adjust modal size to div shape

Question

I'm working on my website and I'd like to create a slideshow. Hence, I have created the modal to expand the image after click - it works fine. However, I want to adjust the modal shape to the image size(thus the vertical photos look ugly in standard shape), but after many hours I gave up because I didn't find any satisfactory result.

HTML:

<div id="myModal" class="modal-wraper">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal">
        <div class="mySlides">
            <div class="slide_1"></div>
        </div>
        <div class="mySlides">
            <div class="slide_2"></div>
        </div>
        <div class="mySlides">
            <div class="slide_3"></div>
        </div>
    </div>

CSS:

.modal-wraper {
    position: fixed;
    display: none;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 1;
}


.modal {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 85vh;
    width: 85vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 5px red;
}


.mySlides {
    display: flex;
    background-color: blue;
    flex-basis: 100%;
}


.slide_1 {
    width: 100%;
    height: 100%;
    background-image: url('../images/JF_3.jpg');
    background-size:contain;
    background-repeat: no-repeat;
    object-fit: cover;
}

 .slide_2 {
    width: 100%;
    height: 100%;
    background-image: url('../images/JF_5.jpg');
    background-size:cover;
}

JS

function openModal(n) {
  document.getElementById("myModal").style.display = "block";
  showSlides(n);

}

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

var slideIndex = 0;

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


function showSlides(n) {
  var i;
  var modal = document.getElementsByClassName('modal');
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n < 0) {
    slideIndex = slides.length-1;
  } else  if (n >= slides.length) {
    slideIndex = 0
  } else {
    slideIndex = n;
  }

  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].style.display = "block";
  dots[slideIndex].className += " active";
  captionText.innerHTML = dots[slideIndex].alt;
}

You'll need to use javascript to get the current visible slide's height and width, and then apply those to the height and width of the `.modal` class. — Jonathan Eltgroth, Aug 08 '19 at 15:50
Do it in `showSlides()` while you have the slide index, after you have set the display style to `block`. You can get the element's height and width, and then apply it to `var modal` using the same javascript logic to target the modals height and width properties. https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height — Jonathan Eltgroth, Aug 08 '19 at 16:08

Adjust modal size to div shape

0 Answers0