html - 根据横向或纵向照片切换 .carousel 高度和宽度

Question

我使用下面的代码将我的风景（4:3）照片放在轮播中。但我想根据照片（风景或肖像）更改 .carousel 的宽度和高度。我怎样才能做到这一点？

html {
 height: 100%;
 width: 100%;
}

body {
 height: 100%;
 width: 100%;
 display: block;
}

.carousel {
 /* the percentages below are for a 4:3 landscape photo(1600x1200) */
 height: 60%;
 width: 70%;
}

/* 我需要设置高度：70%；和宽度：纵向的 60% */

我应该向 carousel-item 添加一个类以指示它是风景照片还是肖像照片？

标签： htmlcsscarousel

Answer 1

创建一个纵向类和一个横向类。当图像加载或获得图像大小时，确定它是纵向还是横向，然后将适当的类添加到图像或轮播容器中。

// list of images - as requested you can put this list in a separate js file 
// make sure it is before the other code below
var imagesArray = ["https://lorempixel.com/300/500/animals/1", "https://lorempixel.com/300/500/animals/2", "https://lorempixel.com/500/300/animals/1","https://lorempixel.com/500/300/animals/2","https://lorempixel.com/500/300/city/1","https://lorempixel.com/300/500/city/2"];


// when the user clicks the random button 
// we get a random image from our list of URLS
// and then set that as the source of the image
function displayImage(direction, isURL) {
  var image = document.getElementById("myImage");
  var label = document.getElementById("loadingLabel");
  var list = imagesArray.slice(); //make a copy
  var currentURL = image.src;
  var currentIndex;
  var index = 0;
  var numberOfImages = list.length;
  
  if (isURL==true) {
    currentURL = direction;
  }
  
  currentIndex = list.indexOf(currentURL);
  
  if (direction=="next") {
    index = currentIndex>=list.length-1 ? 0 : currentIndex+1;
  }
  else if (direction=="previous") {
    index = currentIndex<=0 ? list.length-1 : currentIndex-1;
  }
  else if (direction=="random") {
    list.splice(currentIndex,1);
    index = Math.floor(Math.random()*list.length);
  }
  else if (direction=="start") {
    index = 0;
  }
  else if (direction=="end") {
    index = list.length-1;
  }
  else if (isURL) {
    if (currentIndex==-1) {
      console.log("Image not found in images array. Check the URL");
      return;
    }
    
    index = currentIndex;
  }
  else {
      console.log("Direction not specified");
  }
  
  image.src = list[index];
  label.innerHTML = "Loading " + list[index] + "...";
  label.title = list[index];
  updateNavigationLabel();
}

// this handles when the image has finished loading
// we check if the image is portrait or landscape
// if it is landscape we set the landscape class
// if it is portrait we set the portrait class
function imageLoadHandler(event) {
  var image = document.getElementById("myImage");
  var carousel = document.getElementById("myCarousel");
  var label = document.getElementById("loadingLabel");
  var width = image.naturalWidth;
  var height = image.naturalHeight;
  var isPortrait = width<height;
  var isSquare = width==height;
  
  carousel.classList.remove("portrait");
  carousel.classList.remove("landscape");
  
  var caption = width + "x" + height;

  if (isPortrait) {
    caption = "Portrait (" + caption + ")";
    carousel.classList.add("portrait");
  }
  else if (isPortrait==false) {
    caption = "Landscape (" + caption + ")";
    carousel.classList.add("landscape");
  }
   
  image.caption = caption;
  
  label.innerHTML = caption;
  updateNavigationLabel();
}


function updateNavigationLabel() {
  var image = document.getElementById("myImage");
  var label = document.getElementById("navigationLabel");
  var list = imagesArray.slice(); //make a copy
  var numberOfImages = list.length;
  var currentURL = image.src;
  currentIndex = list.indexOf(currentURL);
  label.innerHTML = currentIndex+1 +" of " + numberOfImages;
}


window.addEventListener("DOMContentLoaded", function() {
  var element = document.getElementById("myImage");
  var button = document.getElementById("button");
  var carousel = document.getElementById("myCarousel");
  
  // listen for when an image loads
  element.addEventListener("load", imageLoadHandler);
  // listen for when the user clicks on the random button
  button.addEventListener("click", function() {
    displayImage('random')
  });

  // Options - load an image when the page loads
  
  // displayImage("start"); // use to load the first image
  // displayImage("end"); // use to load the last image
  // displayImage("random"); // use to load a random image
  // displayImage("specified", "https://lorempixel.com/300/500/animals/2"); // use to load an image in the images array

  displayImage("https://lorempixel.com/300/500/animals/2", true);

});

.landscape {
  height: 60%;
  width: 70%;
  outline:2px solid blue;
}

.portrait {
  height: 70%;
  width: 60%;
  outline:2px solid purple;
}

#myCarousel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#myImage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  outline: 1px dashed red;
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#button {
  position: fixed;
  right: 10px;
  top: 50px;
}

#loadingLabel {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font: 10px sans-serif;
  white-space: nowrap;
}

#navigationLabel {
  font: 10px sans-serif;
}

#navigation {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font: 10px sans-serif;
}

<!-- optionally set images in separate file. order before the main javascript --> 
<script src="myimages.js"></script>

<div id="myCarousel" class="landscape">
    <img id="myImage">
<label id="loadingLabel"></label>
</div>

<button id="button">random</button>

<div id="navigation">
  <button id="prev" onclick="displayImage('previous')">prev</button>
  <label id="navigationLabel"></label>
  <button id="next" onclick="displayImage('next')">next</button>
</div>