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

How to stretch image in img tag larger than its natural size?

本文关键字：大于 自然 图像 img      更新时间：2023-09-26

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

详细信息：我更像是一名后端开发人员，但我目前正在实现一种"放大"功能，点击一张图像，它会用一张更大的图像替换它，然后调整<img>标签所在的<div>的大小，以占用更多空间并有效地"放大"（或者实际上只是取消放大一张大图像）。

我需要做的（用户体验）：在等待加载较大的图像时，我希望用户仍然能够"缩放"，但由于较大的图像尚未加载，他们只会得到图像的颗粒版本，直到它被更高分辨率的图像取代。

相应地更改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);
}

我使用toggleClass、transform: scale和transition组合了一些东西。

单击图像将在一秒钟内调整其大小，同时加载较大的图像。然后，它将在过渡结束时拾取点，或者在加载图像所需时间比过渡持续时间更长的情况下，在完成加载时附加图像。在期间切换转换会过于复杂，我一开始尝试过。还要在父对象上使用addClass进行检查，这样它只会加载一次较大的图像，而不会在每次切换时进行放大。

笔

$('div').click(function() {
  var div = $(this),
  img = div.find('img'),
  path = img[0].src.replace('.jpg', ''),
  ended, loaded;
  img.toggleClass('zoom');
  if (!div.hasClass('large')) {
    div.addClass('large');
    var big = new Image();
    big.src = path + '_large.jpg';
    img.one('transitionend', function() {
      ended = true;
      if (loaded) replaceImage(big);
    });
    $(big).one('load', function() {
      loaded = true;
      if (ended) replaceImage(big);
    });
  }
function replaceImage(grand) {
  if (img.hasClass('zoom')) $(grand).addClass('zoom');
  div.html(grand);
}
});
body {
  text-align: center;
  background: grey;
  overflow: hidden;
}
div {
  display: inline-block;
}
div img {
  width: 400px;
  -webkit-transition: -webkit-transform 1s linear;
  transition: transform 1s linear;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}
.zoom {
  -webkit-transform: scale(2);
  transform: scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="//www.anony.ws/i/2015/11/19/yosemite.jpg" alt="">
</div>

它从原始图像中获取路径，并将_large添加到其中。因此，在这种情况下，图像必须位于同一文件夹中，并且除了额外的扩展之外，基本上命名相同。

经过编辑以确保只有当原始图像也包含zoom类时才应用该类。这可以解决用户在加载大版本之前多次单击时出现的问题。

相关文章：