मैं एक यादृच्छिक स्लाइड शो में 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>
0
stan780953 23 सितंबर 2019, 21:46

1 उत्तर

आप ऑब्जेक्ट फ़िट . प्रॉपर्टी का उपयोग करके देख सकते हैं

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

0
JackyShows 23 सितंबर 2019, 19:05