儘管設備像素比例固定的圖像大小

我想找到一種方法來在所有設備/瀏覽器中具有相同大小（實際250像素）的圖像。我的問題是與設備像素比率。在設備像素比例高於1的設備上，圖像顯示的很小，放大時會變大（如果要放大普通瀏覽器，則會發生這種情況）。儘管設備像素比例固定的圖像大小

所以，我的問題是：有沒有辦法通過使用CSS（或不太有利的JavaScript）來實現一個常量（實際）大小的圖像？是否可以固定尺寸，不要讓它變得更大或更小？

2014-09-05 user197171

我不認爲它是縮小..我想你的頁面被放大了您的設備上的圖像。即使像素比例更高，圖像始終是相同的像素。你只會得到模糊的圖像，但大小將是正確的。 – 2014-09-05 14:57:52

你設置了視口嗎？ https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag – 2014-09-05 15:00:15

@LaurensKling我希望物理形象保持相同的大小。沒有更大，更小。我瞭解，放大或縮小時邏輯大小會發生變化。 – user197171 2014-09-05 17:17:30

您可以封裝在圖像中這樣一個div：

<div id='imageDiv'><img src='theImage.png' class='imageclass' /></div>

然後用CSS這樣的設置圖像的div和位置的大小：

#imageDiv { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

.imageclass { 
    position: absolute; 
}

這應該保持它在所有設備上的大小相同。

2014-09-05 14:58:46 Celt

它不會真的有幫助，因爲這隻會設置邏輯大小，而不是物理的。當你用javascript檢查，它似乎是250像素，但它確實不是。 – user197171 2014-09-05 17:11:13

我相信你想要的是設置視口的consotant比率。

添加到您的<head>：

<meta content="width=device-width, initial-scale=1.0" name="viewport">

2014-09-05 15:01:16

這可能是一個類似問題的解決方案，但我希望一切都可以擴展，除了圖像。所以它不是我正在尋找的東西。 – user197171 2014-09-05 17:12:19

現在我明白你在問什麼了！所以你希望用戶能夠放大頁面，但圖像保持一個固定的大小。我不知道你會怎麼做，我認爲這將是一個非常奇怪的互動。 – 2014-09-08 08:15:06

回答