stackoom
  简体   繁体   中英

Restricting slideshow images to height/width of the slideshow container?

 原文  2017-10-30 21:47:19  0   3    javascript/ html/ css/ image

Question

I have a modal image, that when clicked on open a slideshow, with a prev, and next button that are aligned halfway down from the top of the slideshow. When an image is longer than the slideshow container the slideshow becomes longer, rather than the image becoming smaller to fit the slideshow container (but stay centered).

I want it so that the container always stays the same size, and if the image is shorter, then I'd rather it be centered than moving up as it does now. (basically I want the next, and prev buttons to always in the same position, and halfway down the image). I've been stuck on this for a while, and I've tried some stuff but none of it seems to work.

Note: the 1200x800 image is my standard for what I'd kind of like it to be like, the first pic is an example of too short, last is an example of too long.

Here is the [JSFIDDLE][1]

HTML: 

<body>

  <h2 style="text-align:center">Modal Albums</h2>

  <div class="row">
    <div class="column">
      <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
    </div>
  </div>

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

      <div class="mySlides">
        <div class="numbertext">1 / 4</div>
        <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 4</div>
        <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 4</div>
        <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">4 / 4</div>
        <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" style="width:100%">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

    </div>
  </div>

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)
   }
 }

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;
}

EDIT:

![What i want it to look like]: https://imgur.com/a/jtmmM the shaded in part is the actual image, the box I've drawn is the container (which ofc isn't actually visible on the page)

3 answers

solution1
 0  2017-10-30 22:20:53

If you add the following CSS this should fix your issue. I am not sure I understand exactly how you want things to scale.

After your comment I Found this post that may help you using object-fit

You will need to define a height for your container in this case I set it to 200px but you can pick whatever works best for you. 

.mySlides {
  text-align: center;
  height: 200px;
}
.mySlides img {
  width: 100%;
  max-height:100%;
  object-fit: contain;
}

jsfiddle 

 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; } 
 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 { text-align: center; height: 200px; } .mySlides img { width: 100%; max-height:100%; object-fit: contain; } 
 <h2 style="text-align:center">Modal Albums</h2> <span ></span> <div class="row"> <div class="column"> <img src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal "> <span class="close cursor" onclick="closeModal()">&times;</span> <div class="modal-content "> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" > </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" > </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" > </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" > </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> </div>

solution2
 0  2018-10-17 01:31:24

Change your img style to ( style ="width:1900px;height:970px" align="middle" )

Example 

<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg"  style ="width:1900px;height:970px" align="middle" >
</div>

And you need to do some changes in CSS too.

solution3
 -1  2018-10-17 01:26:35

Change this in your HTML file , 

    <div class="mySlides">
    <div class="numbertext">1 / 4</div>
    <img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg"  style ="width:1900px;height:970px" align="middle" >
    </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Slideshow Container Same Height full width and height fixed slideshow images (<img>) responsive and always centered Set height and width for a JS slideshow Javascript slideshow not displaying the height of images Set a Width and Height to Fill Parent Android SlideShow 1700px width JavaScript Slideshow of images Slideshow Script Centering Issue on Images of Varying Width HTML Slideshow Width hidden slideshow not expanding full width inside hidden container Auto Play slideshow container
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM