html 크기의 이미지를 변경하십시오.

Question

html의 img 태그에서 이미지를 변경하는 동안 문제를 실험하고 있습니다.

나는 그들이 동일하지 그래서 내가 인터넷에서 찾은 이미지를 내 웹 페이지로 작동 바이올린의 예를했다 : 나는 모든 것을 할

var counterImage = 0; 
    var ccI = new Array('http://tiendas.fnac.es/la-canada/files/2010/12/Peque%C3%B1a-orquesta-mediterr%C3%A1neo-300x286.jpg', 
         'http://muack.es/wp-content/uploads/2013/04/smalldata1.jpg', 
         'https://pbs.twimg.com/profile_images/604644048/sign051.gif' 
         ); 
window.image = function(element){ 
    if(counterImage < 3){ 
     document.getElementById("EJ_test").setAttribute('src', ccI[counterImage]); 
     counterImage++; 
    } 
    else{ 
     document.getElementById("EJ_test").setAttribute('src', ccI[0]); 
     counterImage = 1; 
    } 


} 

: http://jsfiddle.net/kZp7V/

이 스크립트 코드 첫 번째 이미지와 동일한 측면을 갖는 이미지, 동일한 높이 및 너비를 의미합니다. 가능합니까?

photoswipe를 사용하여 사진을 찍으라는 질문을 받았지만 사진이 약간 어려웠으므로 지금하고 싶습니다. 다음 주 Photowipe에 대한 모든 것을주의 깊게 읽으 려합니다.

편집 : class = "cropTest"를 이미지 대신 div로 변경 했으므로 이제 모든 이미지의 크기가 "resized"됩니다. 나는 더 작기 때문에 ""사용합니다. img 태그는 이미지에 맞게 조정되지만이 문제는 원하지 않습니다. 나는 다른 이미지를 갖고 싶지만 크기를 유지하고 싶습니다. 나는 이미지가 흐려 지거나 픽셀 화 되어도 상관 없다.

Answer 1

getComputedStyle을 사용하면 이미지의 현재 크기를 가져올 수 있습니다. 예를 들어 너비 스타일이 이미 설정되어 있는지 확인하여 한 번 사용할 수 있습니다. 예 :

window.image = function(element){ 
     if (!document.getElementById("EJ_test").style.width) { 
      var currentStyle = window.getComputedStyle(document.getElementById("EJ_test")); 
      document.getElementById("EJ_test").style.width = 
       currentStyle.width; 
      document.getElementById("EJ_test").style.height = 
       currentStyle.height; 
     } 
     if(counterImage < 3){ 
      document.getElementById("EJ_test").setAttribute('src', ccI[counterImage]); 
      counterImage++; 
     } 
     else{ 
      document.getElementById("EJ_test").setAttribute('src', ccI[0]); 
      counterImage = 1; 
     } 
    }