在保持大小的html中更改图像javascript

我在更改html的img标记中的图像时尝试了一个问题。在保持大小的html中更改图像javascript

我的确在拨弄着我网上找到的图片，使他们不相等，因为我的网页上，其工作的例子： http://jsfiddle.net/kZp7V/

这是脚本代码：

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


}

我想，所有的图像具有与第一个图像相同的方面，我的意思是相同的高度和宽度。有可能吗？

我被要求用photoswipe做，但我觉得它有点困难，所以我想不时做这个，仔细阅读关于下周的photoswipe的一切。

编辑：我改变了类=“cropTest”到div而不是图像，现在所有的图像都是“调整大小”。我使用“”，因为它们更小。 img标签会根据图像进行调整，但我不希望发生这种情况。我想有一个不同的形象，但保持大小。我不介意图像看起来模糊或像素化。

来源

2014-01-21 Biribu

您的ID为'EJ_test'的元素是否有任何宽度属性集？ –

不，我还没有为它创建一个CSS。 – Biribu

您可以使用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; 
     } 
    }

来源

2014-01-21 10:34:58 Tewr

与我的真实图像，它工作正常。谢啦。 – Biribu

在保持大小的html中更改图像javascript

回答

相关问题