Search code examples
csstransformscale

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

Solution

  • 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 :-)