將調整大小但保持在屏幕上相同位置的菜單

Question

我正在嘗試創建一個簡單的特許攤位菜單，該菜單將在圖像左側顯示零食，在圖像右側顯示飲料。

但是，我需要菜單上的項目和背景圖像根據屏幕大小調整大小，同時還允許菜單上的項目保持在圖像上的相同位置。

下面的代碼正在運行，但是使用此代碼，我必須為菜單的每個新行創建一個新的 class。 我知道這不是創建此類頁面的最佳方式。

我當前的 css 來自這篇文章的想法： 將文本定位在圖像上，以便即使在調整瀏覽器大小時它也始終指向圖像中的同一位置

任何幫助表示贊賞。

 <div class="parent"> <table> <tr> <td class="box window">Snacks </td> <td class="box item1">Sausage Dog</td> <div class="box item1 price">3</div> <td class="box item2">Sausage Dog</td> <div class="box item2 price">3</div> <img class="img" src="menubackground.jpg" alt=""/> </tr> </table> </div> <style>.container { border: 1px solid red; width: 300px; height: 90px; } * { box-sizing: border-box; margin: 0; } img { max-width: 100%; display: block; width: 100%; height: 100%; background-size: auto; }.parent { position: relative; }.parent.box { position: absolute; width: calc(1.2vw + 15px); height: calc(1.2vw + 10px); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }.parent.box.window { top: 15%; left: 8%; color: #ffc11c; font-size: 3vw; padding: 40px; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }.parent.box.item1 { top: 27%; left: 6.6%; color: white; font-family: 'Bahnschrift'; min-width: 12%; max-width: 9px; font-size: 2vw; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }.parent.box.item2 { top: 32%; left: 6.6%; color: white; font-family: 'Bahnschrift'; min-width: 12%; max-width: 9px; font-size: 2vw; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }.parent.box.item1.price { top: 27%; left: 20%; color: white; font-family: 'Bahnschrift'; font-size: 2vw; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }.parent.box.item2.price { top: 32%; left: 20%; color: white; font-family: 'Bahnschrift'; font-size: 2vw; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1); }.parent.box.light { top: 16%; left: 48%; color: #ffc11c; }.parent.box.pool { top: 90%; left: 50%; color: #ffc11c; }.parent.box.plant { top: 55%; left: 3%; color: #ffc11c; } </style>

Answer 1

我想你正在嘗試實現這樣的目標：

 * { box-sizing: border-box; margin: 0; }.parent { display:flex; width: 100%; height: auto; justify-content: space-between; background-image: url("https://s7g10.scene7.com/is/image/tetrapak/pouring-milk?wid=600&hei=338&fmt=jpg&resMode=sharp2&qlt=85,0&op_usm=1.75,0.3,2,0"); background-size: cover; background-position: cneter; }.parent table{ padding: 35px 10px; }.box { text-align: center; }

 <div class='parent'> <table class='snack'> <tr> <th class="box window">Snacks</th> <th class="box window">Price</th> </tr> <tr> <td class="box item1">Sausage Dog</td> <td class="box item1 price">3</td> </tr> <tr> <td class="box item2">Sausage Dog</td> <td class="box item2 price">3</td> </tr> </table> <table class='water'> <tr> <th class="box window">Drinks</th> <th class="box window">Price</th> </tr> <tr> <td class="box item1">Sausa</td> <td class="box item1 price">3</td> </tr> <tr> <td class="box item2">Sausa</td> <td class="box item2 price">3</td> </tr> </table> </div>