How can I make sure that my text and image scale together while maintaining their relative positions on the page? Currently, I am using vw to scale the text, but I'm not able to keep it in sync with the image. My goal is to have the text shrink proportionally with the image so that the ratio between them stays consistent as they both respond to changes in size.
Even after attempting to set the image and container to absolute positioning, I still encounter the same issue.
img {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 900px;
max-width: 1364px;
width: 100%;
height: auto;
box-shadow: 10px 10px 5px grey;
}
.container {
position: relative;
margin-left: auto;
margin-right: auto;
color: bisque;
font-style: italic;
font-family: Verdana;
font-size: 0.6vw;
}
.top-left-text {
position: absolute;
top: 8px;
left: 620px;
text-align: left;
}
.top-middle-text {
position: absolute;
top: 8px;
left: 1140px;
text-align: left;
}<div class="container">
<img alt="lagaremeny" height="703" src="lagaremeny.png" width="1376">
<div class="top-left-text">
<div class="auto-style1">
<strong>Sallader</strong>
</div>
<ul>
<li>Kycklingsallad 69kr</li>
<li>Amerikansk sallad 69kr</li>
<li>Grekisk sallad 69kr</li>
<li>Tonfisk, ägg och rödlök 69kr</li>
<li>Västkuströra och ägg 74kr</li>
<li>Skagenröra och ägg 74kr</li>
<li>Salami och sallads ost 74kr</li>
<li>Kebabröra 69kr</li>
<li>Räkor Handskalade Lyxräkor (MFC märkt) 94kr</li>
</ul>
Alla våra sallader består av en bas med isbergssallad,<br> ruccola, röd mangold, röda blad, máche, gurka,<br> mix av körsbergstomater och pasta/eller mer<br> grönsallad och paprika.<br> I alla sallader ingår dressing och bröd.
<br><br>Dressing: Vitlök, Mango curry, Vinaigrette, Curry,<br> Rhodeisland, Blue cheese, Honung o dijong, Mangoraja.
</div>
<div class="top-middle-text">
<div class="auto-style1">
<strong>Arbetarmackor</strong></div>
<ul>
<li>Ägg och biff</li>
<li>Ägg och bacon</li>
<li>Ägg och korv</li>
<li>Ägg, köttbullar och rödbetssallad</li>
<li>Ägg och sill</li>
<li>Ägg och västkustsallad</li>
<li>Leverpastej</li>
<li>Ost och paprika</li>
<li>Ost och skinka</li>
<li>Köttbullar och rödbetssallad</li>
<li>Rostbiff och potatissallad</li>
</ul>
Alla arbetarmackor: 59kr/st.
<br>Standardtillbehör: sallad, gurka och tomat.
</div>My challenge lies in ensuring that when the window is scaled down, the text adjusts its size while remaining fixed in relation to the shrinking image and retaining its original position.