將一個相對格子定位到一個固定格子

-2

我有一個圖像的標題，應該在滾動時進行修正。在下面我有一個容器，它應該總是和頭部有相同的距離。所以如果我調整我的窗口水平，圖像大小調整，因此內容改變了位置。將一個相對格子定位到一個固定格子

實施例：

我設置包裝器position:fixed;和容器以position:relative;。如果您調整窗口大小，它的工作原理是完美的。容器與圖片保持相同的距離..但是，我無法再滾動，因此我無法再看到內容。 :-(

我不知道怎麼用JS，所以也許有人可以給我一個提示

2016-07-01 user3024693

尋求代碼幫助的問題必須包含在問題本身**中重現**所需的最短代碼。雖然您提供了[**鏈接到示例或網站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶將沒有任何價值。 –

嘗試製作一個codepen或jsfiddle來重新創建問題。如果你讓這個問題更容易/更有吸引力來回答那些將自己的智慧擴展到你自己的問題，你就更有可能獲得幫助。 – MassDebates

噢對不起 - 下次我會改變 - 讓我的問題變得更容易/更具吸引力 - 英語不是我的母語，我非常高興，我用我的話描述了我的問題:-(謝謝分享你的智慧:-) – user3024693

這是固定不變的任何元素，具有其所有子固定的。所以，在任何你的包裝將被鎖定，這就是爲什麼你無法滾動的原因。如果你從包裝元素中刪除固定的，那麼你的導航仍然是固定的，並且主體正確滾動。從那裏，我喜歡使用的一個小技巧是像這樣...

<figure class="image_container" style="background:url(files/Header/Haus_Sommer.jpg) no-repeat bottom center fixed;background-size:cover;"> 
    <img src="files/Header/Haus_Sommer.jpg" width="1460" height="1000" alt="" style="opacity: 0;"> 
</figure>

那樣，你可以使用background-attachment：fixed作爲標題圖片，並且仍然從圖片標籤本身獲取縮放比例，因爲它只是將不透明度設置爲0，但仍然存在。

來源

2016-07-01 15:46:13 will

Thx ..我有的概念是，在200頁以上的每張圖片是不同的..但我會記住你的答案..它可能會派上用場其他時間......： - ） – user3024693

如果你願意使用一個小小的javascript，你可以做一些像$（'。image_container'）的東西。each（function（）{var myImg = $（this）.children（'img'）。attr（'src '）; $（this）.attr（'style'，'background：url（'+ myImg +'）no-repeat bottom center fixed; background-size：cover;「）;}）; – will

將一個相對格子定位到一個固定格子

回答

相關問題