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

debugcn 发表于 Dev

stan780953

我希望在随机幻灯片中显示谷歌照片，但我遇到的问题是每张照片的大小不同，有没有办法强制所有照片大小相同而不拉伸。到目前为止，这是我的代码，任何帮助将不胜感激。

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

G-西里尔

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
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。