缩小变换使图像模糊

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 元素（不是安全的跨浏览器技巧）：

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： 避免改变维度的属性，例如 translate on img：

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

Answer 2

我相信您的问题是像素插值：http://www.cambridgeincolour.com/tutorials/image-interpolation.htm

调整图像大小时，必须调整像素。通过缩小，像素被平均化和减少。通过放大，像素被添加，像素之间的平均值填补了空白。

请使用 Photoshop 或 Gimpshop 等图像编辑器来调整图像大小，因为图像程序比网络浏览器更适合此目的。

关于这一点，在浏览器处理插值时，某些百分比比其他百分比效果更好。我注意到它通常是每个季度的那些：25%、50%、75% 的缩小和 125%、150%、175% 的放大往往比其他数字（如 95% 或 73% 等）处理得更好。 )。