Я хочу отобразить фотографии 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>
max-height и max-width - хорошее начало, чтобы не обрезать их: (опция clip уже стоит в другом ответе)
пример
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 }
Вы можете попробовать использовать свойство Подгонка объекта
.fitImage {object-fit: cover; width: 250px; height: 100px}