CSS3比例转换/保持图像质量 [英] css3 scale transform / preserve image quality

问题描述

比方说，最初显示的2000x2000px像素图像的尺寸要小10倍，即200x200px

如果通过CSS3 scale(10) here方法进行转换，则可以正常工作，即使图像最初以这种尺寸显示，它也将看起来非常模糊

通过这种转换是否有办法找回初始图像大小?意思是通过转换显示原始"尺寸的图像

解决方案

将图像放入容器中，然后缩放容器.在这种情况下无需转换

  div {宽度:200像素；高度:200px；}img {宽度:100％;高度:100％;}div:hover {宽度:2000像素；高度:2000px；}  

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

重用Timo D的图像...懒得搜索另一个:-)

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

解决方案

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

这篇关于CSS3比例转换/保持图像质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！