html - 缩小变换使图像模糊

Question

我尝试在悬停时为某些产品制作一点缩放效果。为此，我将图像的容器缩小到 95%，并在悬停时也将其缩放到 100%:

然而，按比例缩小的图像看起来很模糊。我尝试了有关此主题的其他问题中给出的不同解决方案，例如:backface-visibility、blur(0)、translateZ。但似乎什么都没有改变。

有没有办法让它更漂亮，或者它是否已经达到了最佳状态？

.container {
	transform: scale(0.95);
	transition: transform 70ms ease-in;
  float: left;
}

.container:hover {
	transform: scale(1);
}

<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

Answer 1

将以下 CSS 添加到您的 img 元素(不是跨浏览器的安全 hack):

img {
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
   image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

下面的片段:

.container {
  transform: scale(.95);
  transition: transform 70ms ease-in;
  float: left;
}
.container:hover {
  transform: scale(1);
}
img {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

备选方案 1: 避免尺寸改变属性，例如 img 上的 translate:

.container {
  transition: transform 70ms ease-in;
  float: left;
  margin: 5px;
}
.container:hover img {
  transform: translate(0, -3px);
}

<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

备选方案 2: box-shadow:

.container {
  transition: transform 70ms ease-in;
  float: left;
  margin: 5px;
}
.container:hover img {
  box-shadow: 0px 0px 5px #888888;
}

<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>