如何在img标签中拉伸大于其自然尺寸的图像？

Question

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

详细信息：我是一名后端开发人员，但我目前正在实施＆＃34;放大＆＃34;功能，您点击图片，然后用更大的图片替换它，然后调整<div> <img>标签的大小，以占用更多空间并有效地放大＆＃39;放大（或者实际上仅仅是一个大图像）。

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

Answer 1

相应地更改width元素的height和IMG属性。

或者，使用相同名称的CSS属性。请注意，在CSS中，width和height必须包含单位（对于图片，通常为px）。

Answer 2

这可能有效：

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

Answer 3

我使用toggleClass，transform: scale和transition整理了一些内容。

单击图像将在一秒钟内调整大小，同时加载较大的图像。然后，它将在转换结束时选择点，或者如果加载图像需要的时间长于转换的持续时间，则在完成加载时附加图像。在过渡期间切换会过于复杂，我首先尝试了。同时在父母身上使用addClass进行检查，这样它只会加载较大的图像一次，而不是每个切换放大。

Pen

$('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类时应用SQL> SELECT MIN(ename) KEEP (DENSE_RANK FIRST ORDER BY sal) min_name, 2 MIN(sal) AS min_sal, 3 MAX(ename) KEEP (DENSE_RANK LAST ORDER BY sal) AS max_name, 4 MAX(sal) AS max_sal 5 FROM emp; MIN_NAME MIN_SAL MAX_NAME MAX_SAL ---------- ---------- ---------- ---------- SMITH 800 KING 5000 类。当用户在加载大版本之前多次单击时，这会消除一个小故障。