javascript - 悬停并放大时，获取较小的图像以完整质量加载

Question

我有一个包含图像和一些文本的元素列表。

<ul id = "results"> {
  JSON.parse(this.state.data).resultCards.map(function(card) {
    return <li> <img src = {
      'https://image.deckbrew.com/mtg/multiverseid/'+.multiverseid +'.jpg'
    }
    />{card.deviation}</li > ;
  })
} < /ul>

出于屏幕空间的目的，图像以较小的尺寸加载，然后在悬停时重新放大至完整尺寸 (311px)。 (如果重要的话，这是一个 .scss 样式表。)

/* The card images within the list items. */
ul li img{
    height: 175px;
    padding: 3px;
    transition: 0.3s;
}

/* Those images when hovered over. */
ul li img:hover{
    height: 311px
}

问题是当图像被放大时，它们看起来模糊且质量低下，因为我假设它们是以较小的分辨率加载的。有什么方法可以强制以全分辨率加载图像，以便在发生悬停时，生成的全尺寸图像看起来正常吗？

Answer 1

好的，我认为最好的办法是加载图像，然后将它们缩小并再次放大。这将保持宽高比，并且应该在 css 中处理所有分辨率。这方面的一个例子是

transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-webkit-transform: scale(0.6, 0.6);

这会将图像缩小到 60%，然后您可以用相同的方式将它们放大。您也可以使用 Javascript 并在 ajax 中加载较大的图像，但我认为这有点矫枉过正。无论哪种方式，这都有望解决您的问题。这是您可以在 CSS3 2D Transform 上进一步阅读的链接.