是否可以在不拉伸或显示滚动条的情况下将幻灯片中的所有图像设为全尺寸

Question

我想在随机幻灯片中显示 google 张照片，但我遇到的问题是每张照片大小不同，有没有办法可以强制所有照片大小相同而不用伸展。到目前为止，这是我的代码，我们将不胜感激。

<html>

<head>
  <style>
    img {
      width: 100%;
    }
  </style>
</head>

<body>

  <script language="javascript">

    var delay = 10000 //set delay in miliseconds
    var curindex = 0

    var randomimages = new Array()

    randomimages[0] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[1] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[2] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[3] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[4] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[8] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[9] = "https://lh3.googleusercontent.com/MyPhotoLink"
    randomimages[10] = "https://lh3.googleusercontent.com/MyPhotoLink"

    var preload = new Array()

    for (n = 0; n < randomimages.length; n++) {
      preload[n] = new Image()
      preload[n].src = randomimages[n]
    }

    document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random() * (randomimages.length))] + '">')

    function rotateimage() {

      if (curindex == (tempindex = Math.floor(Math.random() * (randomimages.length)))) {
        curindex = curindex == 0 ? 1 : curindex - 1
      }
      else
        curindex = tempindex

      document.images.defaultimage.src = randomimages[curindex]
    }

    setInterval("rotateimage()", delay)

  </script>

Answer 1

您可以尝试使用属性 对象匹配

.fitImage {object-fit: cover; width: 250px; height: 100px}

Answer 2

max-height 和 max-width 是避免剪裁它们的良好开端：（剪辑选项已经在另一个答案中）

例子

var delay = 5000 //set delay in miliseconds
var curindex = 0

var randomimages = new Array()

randomimages[0] = "https://placeimg.com/640/480/any"
randomimages[1] = "https://placeimg.com/1000/880/animals"
randomimages[2] = "https://placeimg.com/240/480/any"
randomimages[3] = "https://placeimg.com/940/80/nature"
randomimages[4] = "https://placeimg.com/100/480/people"
randomimages[8] = "https://placeimg.com/480/980/any"
randomimages[9] = "https://placeimg.com/240/480/tech"
randomimages[10] = "https://placeimg.com/640/280/any"

var preload = new Array()

for (n = 0; n < randomimages.length; n++) {
  preload[n] = new Image()
  preload[n].src = randomimages[n]
}

document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random() * (randomimages.length))] + '">')

function rotateimage() {

  if (curindex == (tempindex = Math.floor(Math.random() * (randomimages.length)))) {
    curindex = curindex == 0 ? 1 : curindex - 1
  } else
    curindex = tempindex

  document.images.defaultimage.src = randomimages[curindex]
}

setInterval("rotateimage()", delay)

img {
  max-height: 100vh;
  max-width: 100vw;
  image-orientation: from-image;
  /* optionnal*/
  display: block;
}


/* demo purpose only */

html {
  display: flex;
  height: 100vh;
}

body {
  margin: auto
}

是否可以在不拉伸或显示滚动条的情况下将幻灯片中的所有图像设为全尺寸

Is it possible to make all images in my slideshow full size without stretching or showing scroll bar

html

javascript

css

image

image-resizing