Question

我在互联网上看到我不应该用绝对像素高度/宽度/大小来定义字体（或任何东西），而是使用 EM ...以便在更高分辨率的显示器上，我的网站可以适当扩展。

但是，我用什么来定义IMAGE高度/宽度...因为图像不能很好地缩放（它们看起来像素化）

更新：

为了澄清，我不指的是页面缩放。我指的是如何使我的Web应用程序分辨率独立，以便在更高的DPI显示上看起来正确。

Answer 1

我知道这个问题有点陈旧，但是想把它放在那里可能会出现的任何人。在谈论具有更高像素密度的移动设备时，移动浏览器将把页面缩放一定量以使其看起来好像网页不是很小。设备根据CSS 2.1 specification实现此缩放。

例如，与台式机显示器相比，目前许多设备的像素密度比为1.5倍。因此，移动浏览器会将网站缩放约150％以补偿额外的像素。新的视网膜显示器具有2倍的像素密度比......因此浏览器可以将网站放大约200％。

问题点 - 开发人员不必担心不同的分辨率设备。如果您希望图像在高分辨率设备上清晰显示，则需要更高分辨率的图像。您通常不必担心1.5x设备，因为质量差异可以忽略不计并且不值得付出努力。然而，新的视网膜显示会导致一些非常模糊的图像，因此您应该使用2倍的图像。

因此，对于下面的图像，您需要导出600x400px图像，以便在新的视网膜显示屏上清晰显示图像：

<img src="photo.jpg" style="width:300px; height:200px" />

Answer 2

字体大小应该在em（或％）中设置，因为如果用户在IE中更改文本大小（视图＆gt;文本大小），在px中设置的文本（或在继承链的某处具有固定大小）赢了调整大小。（其他浏览器在调整px中的文本集时没有问题。）有关详细信息，请参阅How to size text using ems。

当用户更改文字大小时，不会调整具有px尺寸的图像的大小; em尺寸的图像调整大小。因此，如果图像的大小应该相对于文本大小（罕见的情况），那么使用em。否则px尺寸很好。

对于页面缩放（浏览器使所有内容变大或变小），使用em或px定义尺寸（文本或图像）无关紧要。

Answer 3

通常情况下，我使用em来表示大多数元素和图像的精确像素。调整文本大小时，您的图像将无法与其他所有图像一起缩放，因此您需要查看页面在不同文本大小下的显示方式并在需要时进行调整，但我发现这是一个合理的折衷方案（与缩放图像相比）。 / p>

Answer 4

在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。图像与文本的增加或减少完全成比例。

Answer 5

查看此页面的解决方案

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;}

Answer 6

在图像方面，实际上不可能使页面分辨率无关。

您可以将SVG用于图像，因为矢量图形确实独立于DPI，但这对照片效果不佳。

您可以使用高分辨率图像并以较小的尺寸显示它们。这样，当尺寸合适时，它们看起来好多了。在某些浏览器中，缩小的图像看起来不会太糟糕。

这是一个示例页面，http://www.cssplay.co.uk/menu/em_images它具有使用ems调整大小的高分辨率图像。在具有页面缩放功能的Opera上，高分辨率图像在更高的缩放级别下保持清晰度。

Answer 7

对于视网膜设备，您还可以使用两倍大小的第二张图像，并将@ 2x添加到文件名中... 因此，如果您有一个名为image.jpg的200px x 300px图像，您只需输入另一个400px x 600px的图像，并将其命名为image@2x.jpg，视网膜设备将显示该图像。

HTML / CSS：我应该使用什么来定义图像高度/宽度以使其与分辨率无关？

7 个答案: