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

Posted 2023-02-25

【中文标题】更改 html 中的图像保持大小 javascript

【英文标题】：Change image in html keeping size javascript

【发布时间】：2014-01-21 10:08:04

【问题描述】：

我在更改 html 的 img 标记中的图像时正在试验一个问题。

我在 fiddle 中做了一个示例，该示例用作我的网页，其中包含我在互联网上找到的图像，因此它们不相等： 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 的内容。

编辑：我将 class="cropTest" 更改为 div 而不是图像，现在所有图像都已“调整大小”。我使用“”是因为它们更小。 img 标签会适应图像，但我不希望发生这种情况。我想要一个不同的图像，但保持大小。我不介意图像看起来模糊或像素化。

【问题讨论】：

id EJ_test 的元素是否设置了任何宽度属性？

不，我还没有为它创建css。

【参考方案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;