我在互联网上读到过，我不应该用绝对像素高度/宽度/大小来定义字体（或任何东西），而是使用EM ...以便在更高分辨率的显示器上，我的网站可以适当地缩放。
但是，我用什么来定义 IMAGE 高度/宽度......因为图像不能很好地缩放（它们看起来像素化）
更新：
澄清一下，我指的不是页面缩放。我指的是如何使我的 Web 应用程序分辨率独立，以便在更高 DPI 显示器上看起来正确。
问问题
12923 次
7 回答
6
我知道这个问题有点老了，但想把它放在那里，供以后可能出现的任何人使用。当谈到具有更高像素密度的移动设备时，移动浏览器会将页面放大一定量，以使其看起来好像网页不是很小。设备按照CSS 2.1 规范实现这种缩放。
例如，当今许多设备的像素密度比是桌面显示器的 1.5 倍。因此，移动浏览器会将网站缩放约 150% 以补偿额外的像素。新的 Retina 显示屏具有 2 倍的像素密度比……因此，浏览器将网站放大约 200%。
问题的重点 - 开发人员不必担心不同分辨率的设备。如果您希望图像在高分辨率设备上清晰显示，则需要更高分辨率的图像。您通常不必担心 1.5 倍设备，因为质量差异可以忽略不计，不值得付出努力。但是，新的视网膜显示器会导致一些非常模糊的图像，因此您应该使用 2 倍的图像。
因此，对于以下图像，您需要导出 600x400 像素的图像，以便图像在新的 Retina 显示器上清晰显示：
<img src="photo.jpg" style="width:300px; height:200px" />
于 2012-04-10T22:02:38.183 回答
3
字体大小应设置为 em（或 %），因为如果用户在 IE 中更改文本大小（视图 > 文本大小），则以 px 设置的文本（或在继承链中的某处具有固定大小）将不会调整大小。（其他浏览器调整以 px 为单位的文本大小没有问题。）请参阅如何使用 em 调整文本大小以了解更多信息。
当用户更改文本大小时，不会调整具有 px 尺寸的图像；尺寸为 em 的图像被调整大小。因此，如果图像的大小应该与文本大小相关（极少数情况），则使用 em。否则 px 尺寸很好。
对于页面缩放（浏览器将所有内容放大或缩小），使用 em 或 px 定义尺寸（文本或图像）并不重要。
于 2010-04-23T02:55:56.167 回答
0
查看此页面的解决方案
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
于 2010-04-23T03:36:25.607 回答
0
通常，我对大多数元素使用 em，对图像使用精确像素。调整文本大小时，您的图像不会随其他所有内容缩放，因此您需要查看页面在不同文本大小下的外观并在需要时进行调整，但我发现这是一个合理的折衷方案（与缩放图像相比）。
于 2010-04-23T02:06:38.517 回答
0
当涉及到图像时，实际上不可能使页面分辨率独立。
您可以将 SVG 用于图像，因为矢量图形确实独立于 DPI，但这不适用于照片。
您可以使用高分辨率图像并以较小的尺寸显示它们。这样，放大后，它们看起来好多了。在某些浏览器上，缩小的图像看起来不会太糟糕。
这是一个示例页面，http://www.cssplay.co.uk/menu/em_images它具有使用 ems 大小的高分辨率图像。在具有页面缩放功能的 Opera 上，高分辨率图像在更高的缩放级别下保持其清晰度。
于 2010-04-24T12:37:53.153 回答
0
在 IE 中调整文本大小时使用em，当变大时它会变得比应有的大，而当变小时它会比应有的小。
适用于所有浏览器的解决方案是为 body 元素设置默认的字体大小百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
您可以在此处找到使用px和源代码的图像样式的完美示例：http ://w3schools.com/css/css_image_gallery.asp 。图像随着文本的增加或减少而完美缩放。
于 2010-04-23T02:51:38.087 回答
-1
对于 Retina 设备，您还可以拥有两倍大小的第二张图像并将 @2x 添加到文件名中......所以如果您有一个名为 image.jpg 的 200px x 300px 图像，您只需放入另一个 400px x 600px 的图像并命名它image@2x.jpg 和 Retina 设备将显示它。
于 2013-08-15T07:57:04.683 回答