Javascript 如何将img标签中的图像拉伸到大于其自然大小？

如果我有一个N像素乘以N像素的图像，我该如何使用CSS/JS/jQuery使其填充一个单词。。。2N像素乘2N像素空间

详细信息：我更像是一个后端开发人员，但我目前正在实现一个“放大”功能，点击一个图像，然后用一个更大的图像替换它，然后调整

标签的大小，以占用更多空间并有效地“放大”（或者实际上只是不放大一个大图像）

---

我需要做什么（UX）：在等待加载较大的图像时，我希望用户仍然能够“缩放”，但由于较大的图像尚未加载，因此他们只能获得图像的粒状版本，直到它被更高分辨率的图像替换。

更改

IMG

元素的

宽度
和
高度
属性因此

或者，使用相同名称的CSS属性。请注意，在CSS中，
width
和
height
必须有单位（对于图像，它通常是
px
）。
相应地更改
IMG
元素的
width
和
height
属性

或者，使用相同名称的CSS属性。请注意，在CSS中，
width
和
height
必须有单位（对于图像，它通常是
px
）。
这可能会起作用：

var img = $("img");
$("div").click(function()
{
    img.css("width",img.width()*2);
    img.css("height",img.height()*2);
}

这可能会起作用：

var img = $("img");
$("div").click(function()
{
    img.css("width",img.width()*2);
    img.css("height",img.height()*2);
}

我使用
toggleClass
、
transform:scale
和
transition
将一些东西组合在一起

单击图像将在一秒钟内调整其大小，同时加载较大的图像。然后，它将在过渡结束时拾取点，或者如果加载图像所需时间超过过渡持续时间，则在加载完成后追加图像。转换过程中的切换会过于复杂，我一开始就尝试过了。同时在父对象上选中
addClass
，这样它只会加载一次较大的图像，而不是每次切换放大



$（'div'）。单击（函数（）{
var div=$（此），
img=div.find（'img'），
path=img[0].src.replace（'.jpg'，''），
结束，加载；
img.toggleClass（“缩放”）；
如果（！div.hasClass（'large'））{
div.addClass（“大型”）；
var big=新图像（）；
big.src=path+''u large.jpg'；
img.one（'transitionend'，function（）{
结束=真；
如果（已加载）replaceImage（大）；
});
$（大）.one（'load'，function（）{
加载=真；
如果（结束）替换图像（大）；
});
}
函数替换图像（大）{
if（img.hasClass（'zoom'））$（grand.addClass（'zoom'）；
div.html（grand）；
}
});
正文{
文本对齐：居中；
背景：灰色；
溢出：隐藏；
}
div{
显示：内联块；
}
部门经理{
宽度：400px；
-webkit转换：-webkit转换1s线性；
变换：变换1s线性；
-webkit变换原点：中间-顶部；
变换原点：中心-顶部；
}
.zoom{
-webkit转换：规模（2）；
变换：尺度（2）；
}
我使用
toggleClass
、
transform:scale
和
transition
组合了一些东西

单击图像将在一秒钟内调整其大小，同时加载较大的图像。然后，它将在过渡结束时拾取点，或者如果加载图像所需时间超过过渡持续时间，则在加载完成后追加图像。转换过程中的切换会过于复杂，我一开始就尝试过了。同时在父对象上选中
addClass
，这样它只会加载一次较大的图像，而不是每次切换放大



$（'div'）。单击（函数（）{
var div=$（此），
img=div.find（'img'），
path=img[0].src.replace（'.jpg'，''），
结束，加载；
img.toggleClass（“缩放”）；
如果（！div.hasClass（'large'））{
div.addClass（“大型”）；
var big=新图像（）；
big.src=path+''u large.jpg'；
img.one（'transitionend'，function（）{
结束=真；
如果（已加载）replaceImage（大）；
});
$（大）.one（'load'，function（）{
加载=真；
如果（结束）替换图像（大）；
});
}
函数替换图像（大）{
if（img.hasClass（'zoom'））$（grand.addClass（'zoom'）；
div.html（grand）；
}
});
正文{
文本对齐：居中；
背景：灰色；
溢出：隐藏；
}
div{
显示：内联块；
}
部门经理{
宽度：400px；
-webkit转换：-webkit转换1s线性；
变换：变换1s线性；
-webkit变换原点：中间-顶部；
变换原点：中心-顶部；
}
.zoom{
-webkit转换：规模（2）；
变换：尺度（2）；
}

是的，我想知道为什么这么简单的任务（即使对于后端开发人员来说）会让我遇到麻烦。结果发现，构建这个系统的人使用了vh和vw，而不是像素或%作为单位大小，我想这不会使图像超出其自然分辨率。是的，我想知道为什么我在这么一个看似简单的任务中遇到困难（即使是对于后端开发人员来说）。结果是，构建这幅图像的人使用vh和vw，而不是像素或%作为大小单位，我想这不会使图像超出其自然分辨率。