調整大小，移動和縮放圖像和文本divs與瀏覽器調整大小

我認爲這將是一個非常常見的問題，尋找谷歌，但我似乎無法找到答案。任何幫助將不勝感激。調整大小，移動和縮放圖像和文本divs與瀏覽器調整大小

我有一個全尺寸的可重新調整大小的背景圖像的網頁。事情是這樣的：

html 
{ 
    background-size:contain; 
    background: black url(../images/myimage.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center; 
}

在我有一個專門的包含圖像，並且包含一些文本另一Z-層DIV的Z層DIV部分的圖像。

當我開始重新調整瀏覽器窗口的大小時，我的頁面DIV變得瘋狂。當頁面和背景圖像變小時，它們實際上保持靜態。

如何確保包含圖像，鏈接和文本的DIV始終位於正確的位置，而不管用戶的屏幕分辨率是多少，或者無論他們如何重新調整瀏覽器大小。 CSS？ Javascript？ JQuery？什麼是最好的方式來做到這一點？

謝謝！

p.s.請讓我知道，如果有什麼不清楚，需要樣品。

來源

2012-02-07 Shenaniganz

你可以把你的代碼，以便更好地理解 – sandeep 2012-02-07 05:00:07

沒有很好的例子，但很可惜。我只是試圖想出一種方法來做到這一點，但在這裏它是這樣，你有一個想法： http://livestutterfree.com/page/ 根據你的屏幕分辨率是什麼或你如何調整瀏覽器的大小 - 看看文本層如何在頁面上全部錯位？ – Shenaniganz 2012-02-07 05:28:31

在這個例子中，移動是因爲沒有分配給＃content1 div的水平位置，當頁面被調整大小時它會移動，因爲它沒有被分配左邊。＃element1 div與屏幕左側保持相同的位置，因爲它具有左側值。 – 2012-02-07 05:37:08

Css是你最好的選擇。您需要根據具體情況將div的位置設置爲fixed，absolute或relative。 fixed將導致項目在用戶滾動時保持它的位置，而absolute將導致項目與頁面的其餘部分一起滾動，並且無論您在哪裏告訴它，無論它是否在其他內部。 relative獲取它相對於其內部的任何父容器元素的位置，或者如果它不在另一個容器元素內，則該窗口本身。

如果是fixed或absolute，分配right將維持它的排列在屏幕的右側位置，如果用戶重新大小的窗口，或者根據分辨率和left，top，並bottom將所有做相應處理爲好。您可以爲它們分配一個百分比，它也會根據每個分辨率或調整大小進行相應更改。或者你可以指定像素，釐米，毫米，英寸的硬編碼值，etc...這裏有一個jfiddle的代碼示例

來源

2012-02-07 05:08:21

謝謝。我遇到了一些其他無關的問題，但這是另一個問題。 – Shenaniganz 2012-02-14 05:51:09

在我看來做到以下幾點：

從背景中刪除多餘的白色空間圖片
- 從body標籤中刪除背景圖片，並使用主div，並將其放置在
之內。
-remove在div「元素1」，添加背景色爲「內容1」 DIV本身
-to處理基於屏幕分辨率內容的定位，有2種方法： - 1）使用CSS媒體查詢2）使用相對定位使用CSS
- 使用CSS媒體查詢，如果你支持多種分辨率的陣列可能會變得乏味，所以轉而使用CSS相對定位。

e.g

<div class="wrapper"> 
    <div class="content1">Content</div> 
</div> 

.wrapper{ position:relative; width:100%; overflow:hidden; background:url(yourBgImage.jpg);background-size:100% 100%;} 
.content1{position:absolute; top:20%; left:10%;}

來源

2012-02-07 07:16:59 Abhidev

調整大小，移動和縮放圖像和文本divs與瀏覽器調整大小

回答

相關問題