4

小提琴在这里：http: //jsfiddle.net/ZArwT/18/

我正在做一个项目，我需要有几个嵌套的 div 相对于彼此缩放。

父 div 放大 10 倍并旋转，然后该父 div 的子 div 反向旋转以标准化旋转，然后 THAT 的子 div 缩放到 .1x 以标准化其比例。

所有图像均为高分辨率 png。

在 Chrome 中，子图像出现严重像素化和损坏，就好像该软件试图放大一个非常小的图像一样。

在所有其他浏览器（甚至，gasp，IE）中，图像看起来都非常清晰和锐利（因为它“应该”，因为它的显示尺寸低于其实际分辨率）。

如果您在 Firefox、IE 或 Safari 中检查上述小提琴，您会发现穿着明亮连帽衫的家伙看起来清晰而清晰。

如果你看一下 Chrome 中的小提琴，你会看到那个穿着连帽衫的家伙看起来被破坏和像素化了。

不幸的是，我无法在一开始就以最佳最大尺寸创建图像，因为它旨在从相对较小的尺寸放大到覆盖整个屏幕。

我已经查看并尝试了多种解决方案，包括“图像渲染：-webkit-optimize-contrast;”，以及在各种化身中使用“webkit-transform-style：preserve-3d”。

非常感激任何的帮助。

谢谢！

HTML：

<div class="frame"></div>

<div class="frameInner">
  <div class="counterRotate"> <!--normalizes coordinates for content so that x and y are really x and y instead of diagonals -->
    <div class="content">
      <img class="guy" src="http://abraxasleads.com/misc/chromeImageSmash/guy.png" />
    </div>
  </div>
</div>

CSS：

.wrapper {
  display: block;
  width: 718px;
  height: 800px;  
}

.frame {
  display: block;
  width: 718px;
  height: 800px;
  background: url('http://abraxasleads.com/misc/chromeImageSmash/frame.png') 0 0 no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.frameInner {
  display: block;
  width: 470px;
  height: 573px;
  overflow: hidden;
  position: absolute;
  top: 114px;
  left: 123px;
  z-index: 1;
}

.counterRotate {
  display: block;
  width: 100%;
  height: 100%;
}

.content {
  display: block;
  width: 1920px;
  height: 1080px;
  background: url('http://abraxasleads.com/misc/chromeImageSmash/content.png');
  position: absolute;
  top: -483px;
  left: -898.5px;
}

.guy {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
}

JS：

var frame = $('.frame'),
    frameInner = $('.frameInner'),
    counterRotate = $('.counterRotate'),
    content = $('.content'),
    guy = $('.guy'),
    frameRotation = -45,
    counterRotation = 45;

frame.css({
  "webkitTransform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)',
  "msTransform" : 'translate(0px, 0px) scale(10, 10) rotate('+ frameRotation +'deg)',
   "-moz-Transform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)'
})

frameInner.css({
  "webkitTransform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)',
  "msTransform" : 'translate(0px, 0px) scale(10, 10) rotate('+ frameRotation +'deg) ',
  "-moz-transform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)'
})

counterRotate.css({
  "webkitTransform" : 'translate3d(0px, 60px, 0px) rotateZ('+ counterRotation +'deg)',
  "msTransform" : 'translate(0px, 60px) rotate('+ counterRotation +'deg)',
  "-moz-transform" : 'translate3d(0px, 60px, 0px) rotateZ('+ counterRotation +'deg)'
})

guy.css({
   "webkitTransform" : 'translate3d(-120px, -200px, 0px) scale(.1,.1)',
   "msTransform" : 'translate(-120px, -200px) scale(.1,.1)',
   "-moz-transform" : 'translate3d(-120px, -200px, 0px) scale(.1,.1)'
})
4

1 回答 1

2

在缩放图像时，Webkit 会光栅化图像，从而导致像素化。为了防止这种情况，从低于 1 的初始比例（比如 0.1）开始，然后让最终放大版本的比例为 1。这样，渲染引擎会以全尺寸渲染图像并缩小它，当缩放时，它不会产生您提到的像素化。

于 2013-01-10T04:41:28.723 回答