获取较小的图像，以便在悬停和放大时以完整质量加载

Get smaller images to load in full quality when hovered over and enlarged

本文关键字：放大 加载 图像 获取 悬停      更新时间：2023-09-26

>我有一个包含图像和一些文本的项目列表。 

<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
}

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

好的，

我认为最好的办法是加载图像，然后缩小并再次放大。这将保持纵横比，并且应该在 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 转换。

相关文章：