缩小变换使图像模糊

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

我认为您的问题与像素插值有关：http://www.cambridgeincolour.com/tutorials/image-interpolation.htm

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

请使用图像编辑器（如 Photoshop 或 Gimpshop）调整图像大小，因为图像程序比网络浏览器更适合此操作。

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

Answer 2

将以下 CSS 添加到您的 img 元素中（不安全 cross-browser-wise）：

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>

缩小变换使图像模糊

transform scaleing down makes image blurry

html

css

blurry

css-transforms