我希望我的 div 在我的瀏覽器調整大小時移動

Question

我為朋友的生日做了一個網站。 我使用視差來獲得漂亮的滾動效果來勾勒出她的戒指。 但是，僅當我在全屏（15 英寸屏幕）上時，環才會居中。當我調整頁面大小時，環不會移動。我希望整個視差 div 保持居中並在瀏覽器較小時移動。圖像不會調整大小，它們只是消失在瀏覽器后面。我知道，如果我沒有以我的屏幕尺寸查看頁面，頁面就會關閉。任何幫助將不勝感激，謝謝！

https://upliftjewelry.org/rings.html

這就是當瀏覽器寬度變小、圖片被截斷並且沒有任何移動時的顯示方式。

 window.addEventListener('scroll', function(e) { const target =  document.querySelectorAll('.scroll') var index = 0, length = target.length; for (index; index < length; index++) { var pos = window.pageYOffset * target[index].dataset.rate; target[index].style.transform = 'translate3d(0px, '+pos+'px, 0px)'; } }); /* Image 1 */ function hideAll() { document.body.style.backgroundColor = "#988780"; document.getElementById("maintitle").style.color = "#e3e3de"; var sidebar = document.getElementsByClassName("maintext"); var index = 0; length = sidebar.length; for (index; index < length; index++) { sidebar[index].style.color = "#e3e3de"; } } function showAll() { document.body.style.backgroundColor = "#e3e3de"; document.getElementById("maintitle").style.color = "#265935"; var sidebar = document.getElementsByClassName("maintext"); var index = 0; length = sidebar.length; for (index; index < length; index++) { sidebar[index].style.color = "#2B4B42"; } } function hide1(x) { document.getElementById("l_img_1").style.opacity = "0"; hideAll(); } function show1(x){ document.getElementById("l_img_1").style.opacity = "1"; showAll(); } /* Image 2 */ function hide2(x) { document.getElementById("l_img_2").style.opacity = "0"; hideAll(); } function show2(x){ document.getElementById("l_img_2").style.opacity = "1"; showAll(); } /* Image 3 */ function hide3(x) { document.getElementById("l_img_3").style.opacity = "0"; hideAll(); } function show3(x){ document.getElementById("l_img_3").style.opacity = "1"; showAll(); } /* Image 4 */ function hide4(x) { document.getElementById("l_img_4").style.opacity = "0"; hideAll(); } function show4(x){ document.getElementById("l_img_4").style.opacity = "1"; showAll(); } /* Image 5 */ function hide5(x) { document.getElementById("l_img_5").style.opacity = "0"; hideAll(); } function show5(x){ document.getElementById("l_img_5").style.opacity = "1"; showAll(); } /* Image 6 */ function hide6(x) { document.getElementById("l_img_6").style.opacity = "0"; hideAll(); } function show6(x){ document.getElementById("l_img_6").style.opacity = "1"; showAll(); } /* Image 7 */ function hide7(x) { document.getElementById("r_img_1").style.opacity = "0"; hideAll(); } function show7(x){ document.getElementById("r_img_1").style.opacity = "1"; showAll(); } /* Image 8 */ function hide8(x) { document.getElementById("r_img_2").style.opacity = "0"; hideAll(); } function show8(x){ document.getElementById("r_img_2").style.opacity = "1"; showAll(); } /* Image 9 */ function hide9(x) { document.getElementById("r_img_3").style.opacity = "0"; hideAll(); } function show9(x){ document.getElementById("r_img_3").style.opacity = "1"; showAll(); } /* Image 10 */ function hide10(x) { document.getElementById("r_img_4").style.opacity = "0"; hideAll(); } function show10(x){ document.getElementById("r_img_4").style.opacity = "1"; showAll(); }

 @font-face { font-family: Bebas; src: url('/Fonts/Bebas_Neue/BebasNeue-Regular.ttf'); } @font-face { font-family: cormorant; src: url('/Fonts/Cormorant/Cormorant-Medium.ttf'); } @font-face { font-family: maharlika; src: url('/Fonts/Maharlika-Regular.ttf'); } @font-face { font-family: poppins; src: url('/Fonts/Poppins/Poppins-Bold.ttf'); } body { background-color: #e3e3de; } #maintitle { font-family: maharlika; color: #265935; text-align: center; } /* Only for non-index */ #main_title_container { position: fixed; text-align: center; left: 50%; width: 500px; margin-left: -250px; z-index: 1; } /* end */.maintext { font-family: cormorant; color: #2B4B42; writing-mode: vertical-lr; text-orientation: sideways; padding: 20px; transform: rotate(180deg); }.sidebar { position: fixed; padding-top: 4.5rem; margin-top: 7rem; }.maintext:hover { color: #BF621E; } #homepage { text-decoration: none; } #instaLink { text-decoration: none; } #abtMel{ text-decoration: none; } #ringpage { text-decoration: none; } #abrydabout { text-decoration: none; } #contactinfo { text-decoration: none; } /* End of Base CSS */.sidebar_right { position: fixed; margin-top: 7rem; right: 0; bottom: 50%; margin-bottom: -7rem; } #orderInfo { text-decoration: none; }.parallax_effect { position: absolute; display: grid; grid-template-columns: auto auto; padding:0; margin:0; margin-top: 10rem; margin-left: 5rem; margin-right: 5rem; width: 70rem; text-align:center }.parallax_effect_left { grid-column-start: 1; grid-column-end: 2; margin-left: 12rem; margin-right: 2rem; height: 160rem; }.parallax_effect_right { grid-column-start: 2; grid-column-end: 3; margin-right: 12rem; margin-left: 2rem; height: 160rem; } #l_img_1 { margin-bottom: 15rem; } #l_img_2 { margin-bottom: 15rem; } #l_img_3 { margin-bottom: 15rem; } #l_img_4 { margin-bottom: 15rem; } #l_img_5 { margin-bottom: 15rem; } #l_img_6 { margin-bottom: 15rem; } #r_img_1 { margin-top: 15rem; margin-bottom: 15rem; } #r_img_2 { margin-bottom: 15rem; } #r_img_3 { margin-bottom: 15rem; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="CSS/rings.css"> <title>Uplift Jewelry</title> </head> <body> <div id="main_title_container"> <a id="homepage" href="index.html"><h1 id="maintitle">Uplift Jewelry</h1></a> </div> <div class="sidebar"> <a id="ringpage" href="rings.html"><h3 class="maintext">Rings</h3></a> <a id="abtMel" href="about.html"><h3 class="maintext">About Melina</h3></a> <a id="abrydabout" href="abryd:html"><h3 class="maintext">Abryd Morocco</h3></a> <a id="instaLink" href="https.//www.instagram.com/uplift.jewelry/" target="_blank"><h3 class="maintext">Instagram</h3></a> <a id="contactinfo" href="contact.html"><h3 class="maintext">Contact Info</h3></a> </div> <div class="sidebar_right"> <a id="orderInfo" href="orderInfo.html"><h3 class="maintext">Ordering Details</h3></a> </div> <:-- End of Base HTML --> <.-- Parallax --> <section> <div class="parallax_effect"> <.-- Left --> <div class="parallax_effect_left"> <img class="scroll" onMouseOver="hide1(this)" onMouseOut="show1(this)" id="l_img_1" data-rate="-1.2" src="https://via.placeholder.com/500"> <img class="scroll" onMouseOver="hide2(this)" onMouseOut="show2(this)" id="l_img_2" data-rate="-1.2" src="https://via.placeholder.com/500"> <img class="scroll" onMouseOver="hide3(this)" onMouseOut="show3(this)" id="l_img_3" data-rate="-1.2" src="https://via.placeholder.com/500"> <img class="scroll" onMouseOver="hide4(this)" onMouseOut="show4(this)" id="l_img_4" data-rate="-1.2" src="https://via.placeholder.com/500"> <img class="scroll" onMouseOver="hide5(this)" onMouseOut="show5(this)" id="l_img_5" data-rate="-1.2" src="https://via.placeholder.com/500"> <img class="scroll" onMouseOver="hide6(this)" onMouseOut="show6(this)" id="l_img_6" data-rate="-1.2" src="https://via.placeholder.com/500"> </div> <.-- Right --> <div class="parallax_effect_right"> <img class="scroll" onMouseOver="hide7(this)" onMouseOut="show7(this)" id="r_img_1" data-rate="-:3" src="https.//via.placeholder.com/500"> <img class="scroll" onMouseOver="hide8(this)" onMouseOut="show8(this)" id="r_img_2" data-rate="-:3" src="https.//via.placeholder.com/500"> <img class="scroll" onMouseOver="hide9(this)" onMouseOut="show9(this)" id="r_img_3" data-rate="-:3" src="https.//via.placeholder.com/500"> <img class="scroll" onMouseOver="hide10(this)" onMouseOut="show10(this)" id="r_img_4" data-rate="-.3" src="https://via.placeholder.com/500"> </div> </div> </section> <!-- End of Parallax --> <script src="JS/rings.js"></script> </body> </html>

Answer 1

您可以使圖像大小相對於屏幕寬度。 像寬度：70%

Answer 2

在您的 parallax_effect class 將寬度更改為 100% 而不是 70rem。 並在滾動 class 添加 width:100% 和 height: auto.so 你有：

.parallax_effect {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  padding: 0;
  margin: 0;
  margin-top: 10rem;
  margin-left: 5rem;
  margin-right: 5rem;
  width: 100%; /*change this line*/
  text-align: center;
}
/*add this*/
.scroll{
  width: 100%;
  height: auto;
}

也不是所有的圖像ID，目標滾動 class 的邊距。 你的代碼會更干凈。