CSS3 scaling / preserving image quality

Suppose a pixel image of 2000x2000 pixels is initially displayed with a size that is 10 times smaller, i.e. 200x200px

If you convert using the CSS3 method scale(10)here, it will work fine, bu will also look very blurry, even if the image is initially displayed at this size

Is there any way to return the original image size, although this conversion? The value of displaying an image of the "original" size using conversion

+4
source share
2 answers

.

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

Timo D... : -)

0

-.

, 200x200 transform: scale(0.1), , scale(1). , - .

j sFiddle.

+1

Source: https://habr.com/ru/post/1568231/


All Articles