使用CSS缩放图像 [英] Scale Image using CSS
问题描述
您好，
我在几页上显示图像。图像尺寸为50 px
高度和50 px宽度。
在某些页面中，我需要图像为30x30像素，其他40x40像素和
在其他人50x50px。
我可以使用CSS缩放图像吗？
谢谢，
Miguel < br>
Hello,
I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.
Can I scale the image using CSS?
Thanks,
Miguel
推荐答案
2008-04-28，shapper< md ***** @ gmail.comwrote：
On 2008-04-28, shapper <md*****@gmail.comwrote:
您好，
我在几页上显示图像。图像尺寸为50 px
高度和50 px宽度。
在某些页面中，我需要图像为30x30像素，其他40x40像素和
其他人50x50px。
我可以使用CSS缩放图像吗？
Hello,
I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.
Can I scale the image using CSS?
是的，只需将其宽度（或高度或两者）设置为您想要的任何值。
例如
img.foo {width：40px}
浏览器会调整大小但不是很好。如果您想要更好的质量，请使用您的
最喜欢的图像编辑器（如GIMP）为不同尺寸制作单独的文件。
Yes, just set its width (or height, or both) to whatever you want.
e.g.
img.foo { width: 40px }
The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.
在文章< sl ********************* @ bowser.marioworld>，
Ben C< sp ******@spam.eggswrote：
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
2008-04-28，shapper< md ***** @ gmail.comwrote：
On 2008-04-28, shapper <md*****@gmail.comwrote:
您好，
我在几页上显示图像。图像尺寸为50 px
高度和50 px宽度。
在某些页面中，我需要图像为30x30像素，其他40x40像素和
其他人50x50px。
我可以使用CSS缩放图像吗？
Hello,
I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.
Can I scale the image using CSS?
是的，只需将其宽度（或高度或两者）设置为您想要的任何值。
例如
img.foo {width：40px}
浏览器会调整大小但不是很好。如果你想要更好的
质量，可以使用你的
最喜欢的图片编辑器（如GIMP）为不同尺寸制作单独的文件。
Yes, just set its width (or height, or both) to whatever you want.
e.g.
img.foo { width: 40px }
The browser will resize it but not very nicely. If you want better
quality, make up separate files for the different sizes using your
favourite image editor such as the GIMP.
从本机大小上升或下降决定了
''niceness''的等级。我正在与
img程序进行比较并让浏览器执行此操作。而且我想人们可以期待
扩大方向，这是一个相当难以理解的事情，
将被非专业程序如浏览器处理得更糟糕/>
允许浏览器进行大小调整的做法有好处和缺点。优点是减少了作者的麻烦，减少了复杂的服务器文件（更少的名称，更少的文件，通常更少的文件夹）。
的缺点是质量较差。但所有这些东西的细节我都会遗漏，除非有人特别有兴趣以
开放的心态来追求它。
在我自己的实践中，几乎总是如此，我为每页准备了我想要的大小的图片，并且通过使用
完全相同的名称来减少命名的复杂性。但批量不同的大小分成
单独的文件夹。而且我几乎从不增加图片的大小，如果我使用最经典的软件就没有问题（有一些软件可以说b / b
使得能够放大但是如果没有开发的人工智能，他们就永远不会真的成功，我没有这个！而且没有人拥有这个！）。
然而，许多人的形象质量问题网络上的图片
并不像看起来那么明确。至少FF和Safari不会对质量好的img软件更糟糕。人们可以很好地看看，当浏览器调整大小时，你会仔细查看差异。与img
软件扩大（两者都做得很糟糕！）。但是在减少时，
的差异并不会让你尖叫。
< http://dorayme.890m.com/alt/browserReduction。 html>
-
dorayme
Going up or going down from native size determines the level of
''niceness''. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser
There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.
In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).
Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don''t do
all that much worse to quality img software. One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.
<http://dorayme.890m.com/alt/browserReduction.html>
--
dorayme
dorayme写道：
dorayme wrote:
>
从本机大小上升或下降决定了
''niceness''的等级。我正在与
img程序进行比较并让浏览器执行此操作。而且我想人们可以期待
扩大方向，这是一个相当难以置信的事情，
将由非专业程序如浏览器处理更糟糕
>
Going up or going down from native size determines the level of
''niceness''. I am taking the comparison between doing it yourself with
img programs and letting browser do it. And I suppose one can expect the
enlargement direction, being a rather impossibly difficult thing to do,
will be handled worse by a non-specialist program like a browser
从零开始获取东西总是一个棘手的过程，除了
CSI中的幻想....
Getting something from nothing is always a tricky process except with
the fantasy in CSI....
>
允许浏览器进行大小调整的做法有上行和下行空间。优点是减少了作者的麻烦，减少了复杂的服务器文件（更少的名称，更少的文件，通常更少的文件夹）。
的缺点是质量较差。但是除非有人特别有兴趣以
开放思想继续追究它，否则所有这些东西的细节我都会被遗漏。
>
There are upsides and downsides to the practice of allowing a browser to
do the sizing. The advantage is reduced author bother and having less
complex server files (less names, less files, often less folders). The
disadvantages are less quality. But the details of all this stuff I
leave out unless someone is particularly interested to pursue it with
open mind.
另一个缺点是带宽。页面虚拟缩略图是
除了屏幕空间之外绝对没有任何节省。因为无论html属性如何，都必须下载完整的数据
css属性
约束。我只是喜欢这些摄影师的在线画廊，这些画廊有50个/每个b $ b奇怪的50x50缩略图。和一个巨大的数兆字节下载！这是非常有趣的，看着那些小小的照片画在分钟上......
Another downside is bandwidth. A page of "virtual" thumbnails is
absolutely no savings other than "screenspace" since the full data must
be downloaded regardless of the html attribute| css property
constraints. I just love those photographer online galleries with the 50
odd 50x50 "thumbnails" and a hefty multi-megabyte download! It is so
much fun watching those itsy little pics paint over the minutes....
>
在我自己的练习中，几乎总是如此，我准备了每个页面我想要的大小的图片，并且通过使用
完全相同的名称来减少命名的复杂性所有尺寸但批量不同的大小分成
单独的文件夹。而且我几乎从不增加图片的大小，如果我使用最经典的软件就没有问题（有一些软件可以说b / b
使得能够放大但是如果没有开发的人工智能，他们就永远不会真的成功，但是没有人拥有这个！）。
>
In my own practice, almost invariably, I prepare pics for the size I
want for each page and I reduce complications with naming by having
exactly the same names for all sizes but batch the different sizes into
separate folders. And I almost never increase the size of a picture, no
matter if I use the classiest software (there is some software that
makes claims to be able to enlarge well but they can never really
succeed, imo, without a developed AI - and none have this!).
有时，根据原始图片的质量，主题
重要，并使用过滤器和选择性过滤付款，您可以获得一些
体面的结果。但是有一定的限制。只是喜欢那些警察节目
他们有一个6像素放大的自动取款机的许可证
盘子和噗！所有8位数字都清晰呈现！是啊！
Sometimes, depending on the quality of the original image, subject
matter, and paying with filters and selective filtering you can get some
decent results. But there are definite limits. Just love those cop shows
where they have a 6 pixel enlargement of a ATM''s snap of a license
plate, and poof! All 8 digits are clearly rendered! Yeah!
>
尽管如此，网上很多照片的图像质量问题
并不像看起来那样清晰。至少FF和Safari不会对质量好的img软件更糟糕。
>
Nevertheless, the question of quality of image for many pics on the web
is not as clear cut as it might seem. At least FF and Safari don''t do
all that much worse to quality img software.
也许是某些人使用软件的方式，或者是真正便宜的消费者
软件。大多数浏览器都采用像素下降来缩小图像，并且在图像编辑器中使用的抗锯齿算法无法接近图像编辑器，并且取决于您减少了多少图像一些锐化或自适应
unsharpen掩码过滤器将最有效地改善结果。
Maybe the way some people use software, or really cheap consumer
software. Most browsers employ pixels dropping to reduce an image and in
no way is this close to anti-aliasing algorithms used by image editors
and depending on how much you reduce an image some sharpen or adaptive
unsharpen mask filter will most assuredly improve the result.
人们可以很好地看看是否
你仔细看看浏览器调整cf.与img
软件扩大（两者都做得很糟糕！）。但是在减少时，
的差异并不会让你尖叫。
< http://dorayme.890m.com/alt/browserReduction。 html>
One can pretty well see if
you look closely the difference when browser resizes up cf. with img
software enlargement (both doing a lousy job!). But in reduction, the
difference does not exactly scream out at you.
<http://dorayme.890m.com/alt/browserReduction.html>
很难说没有看到原始的大图像，但快速的
尝试，字面上30秒，有点过滤和技巧
删除一些文物......
http://www.littleworksstudio.com/tem...specslarge.jpg
specslarge.jpg（JPEG图像，600x451像素）
-
保重，
Jonathan
----- --------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
这篇关于使用CSS缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
