How to make horizontally long images fit into the slideshow as well?

Question

I have a modal image that opens slideshow when clicked, but at first I couldn't keep the slideshow the same size, then after I got that working I couldn't make it keep the image's aspect ratio. I made that work for images tat are too long, but not for one's that are too wide. The image won't change the height of the div, but now the image will stretch out of the side of the slideshow if its longer. I want it to shrink (while maintaining ratio) to fit into it.This is kind of what it should be, the shaded in part is the image. I hope that is clear, if not I will try to clarify, changing the horizontal size of the fiddle might help. EDIT: I improved it by taking commentor's advice, but when I shrink the slideshow horizontally some of the images gets smushed rather than shrinking to scale (like the 800X1200 image does), and for whatever reason the first image also gets smushed if i change the window vertically it also distorts the image.

Alternatively if you don't how to do this I thought of maybe using bootstrap's default carousel and have it pop up just like mine does, I believe bootstrap's works better with different sized images, but I couldn't figure that out.

JSFIDDLE HTML:



  Modal Albums

  
    
      
    
  

  
    ×
    

      
        1 / 4
        
      

      
        2 / 4
        
      

      
        3 / 4
        
      

      
        4 / 4
        
      

      ❮
      ❯

CSS:

 body {
   font-family: Verdana, sans-serif;
   margin: 0;
 }

 * {
   box-sizing: border-box;
 }

 .row > .column {
   padding: 0 8px;
 }

 .row:after {
   content: "";
   display: table;
   clear: both;
 }

 .column {
   float: left;
   width: 25%;
 }
 /* The Modal (background) */

 .modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: rgba(0, 0, 0, 0.9);
 }
 /* Modal Content */

 .modal-content {
   position: relative;
   background-color: rgba(0, 0, 0, 0.9);
   margin: auto;
   padding: 0;
   width: 90%;
   max-width: 1200px;
 }
 /* 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;
 }

 .mySlides {
   display: none;
 }

 .cursor {
   cursor: pointer
 }
 /* Next & previous buttons */

 .prev,
 .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   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;
   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);
   text-decoration: none;
 }
 /* Number text (1/3 etc) */

 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }

 img {
   margin-bottom: -4px;
 }

 t img.hover-shadow {
   transition: all .2s ease-in-out;
 }

 .hover-shadow:hover {
   transform: scale(1.1);
 }

 .modal-content {
   -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)
   }
 }


.mySlides img {
   height:100%;
   margin:0 auto;
   margin-bottom:50px;
}

.mySlides {
    text-align:center;
    height:80vh;
}

JS:

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");
  var captionText = document.getElementById("caption");
  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;
}

Joanna Gaudyn · Accepted Answer

I'd suggest creating a class instead of inline css.

Check the jsfiddle


  1 / 4
    
  
...


.img {
  max-width:100%;
  max-height:100%;
  width: auto;
  height: auto;
  object-fit: scale-down;
}

The issue is created by your width:auto property. Instead, use max-width:100% and it will take full width of your modal. Add object-fit: scale-down to make sure the whole image displays, independently from it's size and proportions. Hope this helps.

How to make horizontally long images fit into the slideshow as well?

Answers (1)

Related Questions