html - 根据风景或肖像照片切换轮播的高度和宽度

我使用下面的代码将我的风景（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％* /

我是否应该在轮播项目中添加一个类别，以表明它是风景照片还是肖像照片？

最佳答案

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

// 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>