获得较小的图像，以全面加载时，盘旋和放大。

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>

​

对于屏幕不动产的目的，图像加载在一个较小的大小，然后重新放大到全尺寸(311 of )时，盘旋。(如果这重要的话，这是一个.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二维变换上进行的进一步阅读的链接。