css3 scale transform / preserve image quality

问题

Let's say a 2000x2000px pixel image is initially displayed at a size that is 10 times lower, meaning 200x200px

If transformed through a CSS3 scale(10) here method, it will sure works fine, bu it'll also look very blurry, even if the image is initially displayable at such a size

Is there a way to get the initial image size back though this kind of transform ? Meaning displaying the "original" sizes image through a transform

回答1:

Put the image in a container, and scale the container. No need for transforms in this case

div {
    width: 200px;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
}
div:hover {
    width: 2000px;
    height: 2000px;
}

<div><img src="http://www.solarviews.com/raw/earth/bluemarblewest.jpg" width="2048" height="2048"></div>

Reusing the image from Timo D ... Too lazy to search for another one :-)

回答2:

You could try and do the scaling the other way around.

So, in the regular state, you downscale the image to 200x200 with transform: scale(0.1) and when you want it to enlarge, just set it to scale(1). That way you shouldnt experience any blurriness.

Checkout this jsFiddle.

来源：https://stackoverflow.com/questions/27556426/css3-scale-transform-preserve-image-quality