在不同的桌面分辨率下以相同尺寸顯示圖像

我需要顯示信用卡大小的卡片圖像，它必須在所有桌面分辨率中具有相同的大小，這意味着它需要在物理卡的寬度和高度相同。在不同的桌面分辨率下以相同尺寸顯示圖像

我已經研究了將物理毫米變成像素並調整圖像大小是多麼容易，但這比首先想到的要複雜得多。

任何人有任何想法？

2012-09-13 BillyMedia

這裏的問題不只是屏幕分辨率之一，而且屏幕尺寸。例如，21「和24」顯示器通常都具有1920x1080分辨率，因此在21「上顯示20px的正方形更小，但是計算機本身實際上並不需要知道屏幕的物理尺寸（儘管它有時會這樣），因此如果不是不可能準確地預測屏幕上會出現什麼樣的大小是很困難的，你可以使用CSS mm打印，但是在屏幕上我相信它只是基於標準像素密度的近似值。更有幫助 – Ben

使用mm（以毫米爲單位）而不是px的css寬度和高度。據我所知，CSS支持。但在this文件中指出，「絕對長度單位高度依賴於輸出媒體，因此比相關單位有用」。但它是儘可能接近精確，恕我直言，你可以得到。

來源

2012-09-13 16:53:26 Kuro

你也可以使用釐米，英寸等，看到這裏http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx – user1477388

檢查http://htmlhelp.com /reference/css/units.html以及...我不確定微軟網站上的css是不是專門用於IE的，可能會有差異，我不知道。 – Kuro

在css中使用物理單位只是真正推薦用於打印，因爲它們並不總是以預期的大小輸出（http://www.w3.org/Style/Examples/007/units.en.html） – Ben

我不確定這是否是跨瀏覽器的解決方案，但它應該適用於大多數瀏覽器。

HTML：

<img id="image" src="img.jpg" />

CSS：

#image { 
    height:inherit; 
    width:inherit; 
}

這應該給你的圖像相同的寬度和高度父DIV。因此，您的圖片必須包含在具有圖片的確切高度和寬度的div中。

來源

2012-09-13 17:47:04

謝謝大家，我經調查後懷疑這是不可能的。以mm爲單位的尺寸似乎並不一致，所以我可能不得不對此表示失望。

來源

2012-09-14 07:22:56 BillyMedia

您現在可以使用viewport units如大衆，VH，VMIN，VMAX：

img{ 
    width: 2vw; 
    height: 2vw; 
}

現在，如果你在任何分辨率看到圖像，這將是相同的。

vh - 視口高度的1/100。
vw - 視口寬度的1/100。
vmin - 視口的高度和寬度之間的最小值的1/100。
vmax - 視口的高度和寬度之間的最大值的1/100。

而且看，can i use viewport units

來源

2015-07-02 09:07:19

在不同的桌面分辨率下以相同尺寸顯示圖像

回答

相關問題