Масштабирование анимированного размера изображения на Javascript

Question

<div id="dragon" style="position: absolute; left: 600px; top: 400px; width:90px; height:90px;"> 

    <script language="JavaScript"> 

$(document).ready(function() { 

if(window.addEventListener)window.addEventListener("load",animateImagesStart,false); 
else if(window.attachEvent)window.attachEvent("onload",animateImagesStart); 
}); 


function animateImagesStart() { 

var imgs=[ 
     "image/dragon/drag0.png", "image/dragon/drag1.png", "image/dragon/drag2.png", "image/dragon/drag3.png", "image/dragon/drag4.png", "image/dragon/drag5.png", "image/dragon/drag6.png", "image/dragon/drag7.png", "image/dragon/drag8.png","image/dragon/drag9.png" 
    ]; 

// preloading images 
var img,count=imgs.length, 

    imageLoadComplete=function(ev) { 
     if(ev.type=="error")imgs.splice(imgs.indexOf(this),1); 
    }; 

for(var i=0;i<count;i++){ 
    img=new Image(); 
    img.onerror=imageLoadComplete; 
    img.src=imgs[i]; 
    imgs[i]=img; 
} 

var domImg=document.getElementById("dragon"), 
    currentImageIndex=0, 
    animateImages=function(){ 
     if(currentImageIndex>=imgs.length)currentImageIndex=0; 
     if(imgs[currentImageIndex].complete)domImg.style.backgroundImage="URL("+imgs[currentImageIndex].src+")"; 

     currentImageIndex++; 
     setTimeout(animateImages,1000); 
    }; 
setTimeout(animateImages,0); 

}

Прямо сейчас, анимированное изображение мало, только по умолчанию размер изображения, как можно масштабировать его Bigge размера г? Я пытаюсь, если (imgs [currentImageIndex] .complete) domImg.style.backgroundImage.height = '200px'; if (imgs [currentImageIndex] .complete) domImg.style.backgroundImage.width = '200px'; Это ничего не делало.

И теперь я также попробую вместо большого анимированного размера, есть 4 экземпляра анимированных изображений, все они одинакового размера и оригинального размера.

Что я хочу, это один пример анимированного изображения и масштабирование его больше.

Answer 1

Вы хотите использовать объявление CSS background-size для масштабирования фонового изображения. Масштабирование фонового изображения напрямую не связано с размерами узла, к которому применяется фон. По умолчанию фоны будут отображаться при любом разрешении исходного изображения и фрагменте, чтобы соответствовать любому узлу, которому они назначены (именно поэтому вы видели несколько фоновых изображений при увеличении размера div).

Просто помните, что размер фона поддерживается в IE9 и выше, но не ниже. (Все остальные основные браузеры поддерживали его некоторое время.) Если вам нужно поддерживать IE8 и ниже, вам, вероятно, понадобится ввести фактический тег img, который масштабируется по вашему желанию, и использовать z-index, чтобы обеспечить его за другими узлами.