Div每個屏幕的尺寸相同

在我的網站上，人們可以在電路板上張貼圖像並拖動它們。Div每個屏幕的尺寸相同

目前我使用以下命令：

width:60%; 

height 40%;

他們可以保存他們的工作。

的位置保存利潤率所以圖像可以top:50px;和left:150px;

所以它的50像素的股利和50像素從div的自上而下的左邊框的右側。

如果他們加載他們的工作，它必須看起來完全一樣。

因此，如果圖像位於右下角，則它們必須在加載文件時位於右下角。

我的問題是，如果用戶將其加載到不同的分辨率上，它將佔用邊距，並且如果屏幕分辨率在下一個屏幕上更大，則圖像將不會在右下角，因爲有更多空間原因50 1200％，低於1900年

50％，所以，我必須使用PX width和height，但如果我在1200像素設置600px的它看起來不錯，但600px的對1900px不會好看。

有沒有辦法使用px，但在每個頁面上看起來都不錯？

因此，基本上我想使用px，但它必須看起來一樣（就像我使用％時一樣），所以頁邊距相同，頁面看起來一樣，大分辨率上沒有大的開放空間。

Example

i上在1366製成的板並重新打開它在1024圖像取餘量從左側所以它是從原板的例子

。

但董事會（黃色背景）是相同的屏幕％。

所以我想要一個電路板，即相同的屏幕百分比，但加載在每個分辨率相同的圖像，所以1025屏幕右下角必須在1366屏幕的右下角。

如果我使用px只有站點看起來不同的所有決議，這就是我想要防止。

來源

2013-03-22 Sven van den Boogaart

Somde代碼或示例會很有用。 – 2013-03-22 08:55:53

您的html樣本將很有用，或者使用http://jsfiddle.net/提供問題示例 – Tanner 2013-03-22 08:55:53

爲您的身體（或父元素）給出固定的寬度。 – 2013-03-22 08:58:20

-1

它聽起來像你必須做的是自適應主題或響應式設計在CSS中。

@media screen and (max-width: 1024px){ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; } 
}

對於最大寬度爲1024px的屏幕，設置img元素。您可以爲每個想要考慮的屏幕大小創建其中的一部分，並且您應該能夠對用戶看到的內容進行完全細緻的控制，而不管其屏幕尺寸是多少。

來源

2013-03-22 09:01:07 TopherGopher

所以如果我用1900 px進入一個屏幕，整個頁面設置看起來會不一樣，那就是我想要避免的。 – 2013-03-22 09:29:27

我看到了 - 您試圖將圖片保留爲相同尺寸，但仍然看起來不錯。也許你可以嘗試與pinterest相同的方法，它們將圖片縮放到寬度相同，縱橫比保持不變，因此列整齊排列。並允許行數量儘可能大。如果沒有別的，他們的CSS將揭示他們如何按照我認爲你想要的響應方式縮放圖片。 – TopherGopher 2013-03-22 16:12:40

如果不是這樣，我會建議使用JS來獲取document.width（所有密集目的的屏幕寬度）並使用original_image.width，計算出每個圖像的絕對位置。它有點笨拙，但它可能會讓你看起來更好。 – TopherGopher 2013-03-22 16:19:23

Div每個屏幕的尺寸相同

回答

相關問題