Question

我尝试对某些产品的悬停进行一点缩放效果。为此，我将图像容器缩小到95％，并在悬停时将其缩放100％：

然而，图像按比例缩小，模糊不清。我在其他有关此主题的问题中尝试了不同的解决方案，例如：backface-visibility，blur（0），translateZ。但似乎没有任何改变。

有没有办法让这个更漂亮或者它能够得到这么好的东西？

＆＃13;

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

＆＃13;

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

＆＃13;

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) */
}

以下片段：

＆＃13;

.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) */
}

＆＃13;

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

＆＃13;

备选方案1：以避免维度更改属性，例如translate上的img：

＆＃13;

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

＆＃13;

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

＆＃13;

备选方案2： box-shadow：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

在这方面，当涉及到处理插值的浏览器时，某些百分比比其他百分比更好。我注意到它通常是每个季度的那些：25％，50％，75％减少和125％，150％，175％放大往往比其他数字处理得更好（如95％或73％，等）。

变换缩小使图像模糊

2 个答案: