将调整大小但保持在屏幕上相同位置的菜单

Question

I am trying to create a simple concession stand menu that will display snack items on the left side of the image and drinks on the right side of the image.

However, I need the items on the menu and the background image to resize depending on the size of the screen while also allowing the items on the menu to stay in the same location on the image.

The code below is working, but with this code, I am having to create a new class for each new row of the menu. I know this is not the best way of creating this type of page.

My current css is from the idea on this post: Positioning text over an image so that it always points to the same spot in the image even when resizing the browser

Any help is appreciated.

 <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

I suppose you're trying to achieve something like this:

 * { 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>