HTML/CSS：我應該使用什麼來定義圖像高度/寬度以使其分辨率獨立？

我已經在互聯網上讀過所有我不應該用絕對像素高度/寬度/大小定義字體（或任何東西）的作品，而是使用EM ...以便在更高分辨率的顯示器上，我的網站可以縮放適當。HTML/CSS：我應該使用什麼來定義圖像高度/寬度以使其分辨率獨立？

不過，我應該使用什麼來定義圖像高度/寬度......因爲圖像將無法很好地擴展（它們看起來是像素化）

UPDATE：

要澄清，我而不是指的是頁面縮放。我指的是如何使我的Web應用程序分辨率獨立，以便在更高的DPI顯示上看起來正確。

來源

2010-04-23 Tedy

任何給你建議的人都不知道他們是什麼。 – 2010-04-23 01:58:13

不幸的是，如果圖像沒有以原始尺寸顯示，圖像可能看起來像素化。這就是爲什麼具有相對尺寸的圖像在互聯網上普遍使用不多的原因。 – 2010-04-24 12:40:49

通常，我使用em來表示圖像的大多數元素和精確像素。當調整文本大小時，圖片不會隨着其他所有內容一起縮放，因此您需要查看頁面如何查看不同的文本大小並在需要時進行調整，但我認爲這是一個合理的折中方案（與縮放圖片相比）。

來源

2010-04-23 02:06:38

所以，你是在更高的DPI上回答 - 世界上每個人都是S.O.L？ – Tedy 2010-04-23 02:58:24

嗯，不完全是。你有一個選擇，就像你在你的問題中指出的那樣。你可以調整這些人的圖像大小（通過em），它們將會像素化，或者你可以讓它們保持不變（通過px），並且它們不會隨着文本而改變。如果你真的想支持高DPI的人，你可以使用高分辨率的圖像，他們不會像素化，但通常帶寬的折衷和更高的頁面加載時間是不被接受的。 – 2010-04-23 03:22:43

使用em當在IE中調整文本大小時，它變得比應該變大時要大，比變小時要小。

，在所有瀏覽器上運行的解決方案，以百分比設置默認字體大小爲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-23 02:51:38 bancer

您發佈的文章不是特定於我的問題。即使您使用px來定義所有大小/高度/寬度 - Web瀏覽器足夠聰明，可以適當縮放。我指的是如何在更高的DPI分辨率顯示上進行縮放 – Tedy 2010-04-23 02:57:43

應該在em（或％）中設置字體大小，因爲如果用戶在IE中更改文本大小（視圖>文本大小），則在px中設置的文本（或者在繼承鏈上的某個固定大小）不要調整大小。（其他瀏覽器在調整文本大小時沒有問題）有關詳細信息，請參見How to size text using ems。

當用戶更改文字大小時，不會調整px尺寸的圖像的大小; em尺寸爲的圖像爲調整大小。因此，如果圖像的大小應該與文本大小相關（極少數情況下），請使用em。否則px尺寸是好的。

對於頁面縮放（瀏覽器將所有內容放大或縮小），使用em或px定義尺寸（文本或圖像）無關緊要。

來源

2010-04-23 02:55:56

我不是指頁面縮放...我指的是縮放網頁，因爲顯示DPI更高。（爲了使我的網頁解決方案獨立）。因此，你能否修改你的答案。謝謝 – Tedy 2010-04-23 02:59:22

我不知道任何將根據DPI縮放文本的瀏覽器。（根據http://msdn.microsoft.com/en-us/library/cc849094%28VS.85%29.aspx IE8可以設置基於DPI的默認頁面縮放）。 – 2010-04-23 03:47:47

......並且DPI的大多數系統概念如果完全提供，它們絕對是不正確的。 – msw 2010-04-23 03:56:08

看到這個頁面的解決方案

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-23 03:36:25

我不認爲你很理解我的問題。您鏈接的文章討論瞭如何讓您的網頁「成比例」。我正在尋找一種方法來使我的網站「獨立於決議」，這與成比例不同。隨着監視器/顯示器出現在300+ DPI，網頁將顯得非常小，除非網頁是獨立於分辨率的，使得96DPI顯示器上的圖像/字體等的*物理*尺寸可以是相同的物理尺寸與300 DPI顯示器一樣。要完成這樣的壯舉，網頁設計需要*獨立於分辨率*，而不僅僅是proporationl – Tedy 2010-04-23 03:51:27

@Tedy - 我只是閱讀你的問題標題「我應該使用什麼來定義圖像高度/寬度以使其分辨率獨立？」 – 2010-04-23 04:13:38

這不是真的有可能使一個網頁的分辨率無關，當涉及到圖片。

您可以使用SVG處理圖像，因爲矢量圖形確實與DPI相互獨立，但是這對照片來說效果不佳。

您可以使用高分辨率圖像並以較小的尺寸顯示它們。這樣，當它們大小合適時，它們看起來好多了。在某些瀏覽器上，縮小的圖像看起來不會太糟糕。

這是一個示例頁面，http://www.cssplay.co.uk/menu/em_images它具有與ems大小的高分辨率圖像。在使用頁面縮放的Opera上，高分辨率圖像在較高縮放級別保持其清晰度。

來源

2010-04-24 12:37:53 luminarious

我知道這個問題有點老了，但是想把它放在那裏，以便任何後來可能會來的人。當談到像素密度較高的移動設備時，移動瀏覽器會縮小頁面的大小，使網頁看起來好像網頁不是很小。設備按照CSS 2.1 specification執行此縮放。

例如，與臺式監視器相比，今天許多設備的像素密度比率爲1.5倍。因此，移動瀏覽器將縮小約150％的網站來彌補額外的像素。新的視網膜顯示器具有2倍的像素密度比......因此，瀏覽器在網站中放大約200％。

問題要點 - 開發人員不必擔心不同的分辨率設備。如果希望圖像在高分辨率設備上清晰顯示，則需要更高分辨率的圖像。您通常不必擔心1.5x設備，因爲質量差異可以忽略不計，不值得您付出努力。但是，新的視網膜顯示會導致一些非常模糊的圖像，因此您應該使用兩倍的圖像。

所以以下圖片，你會想，爲了導出一個600x400px圖像的圖像清楚地顯示了新的Retina顯示屏上：

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

來源

2012-04-10 22:02:38

-1

對於視網膜設備，你還可以有第二個圖像是文件名的兩倍@ 因此，如果您有一個名爲image.jpg的200像素x 300像素的圖像，您只需放入另一個尺寸爲400像素x 600像素的圖像，並將其命名爲[email protected]，並將視網膜設備命名爲反而顯示。

來源

2013-08-15 07:57:04 user2685173

HTML/CSS：我應該使用什麼來定義圖像高度/寬度以使其分辨率獨立？

回答

相關問題