將元素放置在窗口上的相同位置調整大小

我的網頁由兩部分組成：一個將調整大小爲任意窗口大小的圖像，然後是一個帶有4個文本框的窗體，位於圖像頂部的特定位置。將元素放置在窗口上的相同位置調整大小

我的問題是文本框移動窗口大小調整位置的方式。我花了6個多小時拉我的頭髮試圖在CSS和jQuery的一切，但沒有什麼我可以去工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
    body 
    { 
     margin: auto; 
     width: 100%; 
    } 

    .Wrapper 
    { 
     position:relative; 
     min-width: 500px; 
     width: 100%; 
     margin:auto; 
    } 

    .Image 
    { 
     max-width: 1150px; 
     max-height: 1453px; 
     width: 100%; 
    } 

    .Form 
    { 
     position: relative; 
     top:-260px; 
     left: 200px; 
     width: 130px; 
     border: solid 1px #000; 
    } 
</style> 
</head> 
    <body> 
     <div class="Wrapper"> 
     <div> 
      <img src="image.png" class="Image" /> 
     </div> 
     <div class="Form"> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
     </div> 
    </div> 
</body> 
</html>

全窗口： enter image description here

大小的窗口： enter image description here

來源

2013-04-11 the sandman

你能創建一個jsfiddle嗎？你的標記+ CSS不會在你的屏幕截圖中重新創建佈局 – Ejaz 2013-04-11 18:30:29

黑盒從哪裏來？它是圖像的一部分嗎？ – Blazemonger 2013-04-11 18:31:00

@Blazemonger - 是的，它是圖像。 – 2013-04-11 18:32:17

首先你應該設置最大尺寸的包裝，只是使圖像佔用100％的寬度。你也應該把絕對形式定位於相對位置，並將其從底部定位。這樣的事情：http://jsfiddle.net/ndqna/2/

那個卑鄙的說，效果還沒有100％完美無瑕。隨着圖像縮放，表單的位置將需要更改。你可以試着用百分比來接近這個位置。就像這樣：http://jsfiddle.net/ndqna/3/

.Form 
{ 
    position: absolute; 
    bottom: 10%; 
    left: 15%; 
    border: solid 1px #000; 
}

正如你會發現它仍然不是完美的。如果你真的想要精確的定位，你需要做一些腳本來計算確切的位置。但是，在開始編寫jQuery代碼之前，爲什麼不將「框」設置爲表單的背景，並通過切片源圖像將其從頁面的背景圖像中移除？這種方式的定位不需要像素完美，因爲盒子會隨着形狀一起移動...

來源

2013-04-11 18:58:08 Pevara

即使這不工作100％，這是最接近答案。所以我會標記它。謝謝 – 2013-04-22 15:53:22

這可能是因爲你的包裝的CSS。儘量不要使用最小或最大寬度，只使用固定寬度。

.Wrapper 
    { 
     position:relative; 
     width: 945px; 
     margin:auto; 
    }

Fiddle

來源

2013-04-11 18:33:31

你能證實這樣做，圖像仍然會增加和減少的大小瀏覽器被重起？當我調整大小時，它仍然不會調整100％寬度/高度。謝謝 – 2013-04-11 18:43:50

這樣的東西http://jsfiddle.net/mohammadAdil/r9wSX/1/ – 2013-04-11 19:02:53

將元素放置在窗口上的相同位置調整大小

回答

相關問題