画像に重ねている要素を画面幅が変わっても画像の中央からずれないようにしたいです。

実現したいこと

画像上の真ん中に重ねているロゴとテキストを画面幅似合わせて拡大・縮小して、画像の中央からずれないようにしたいです。

前提

画面幅が変わると画像サイズが拡大縮小しますが、その上に重ねているロゴとテキストも同じように拡大縮小させて位置関係を崩さないようにしたいです。transformプロパティを使用して実現したいです。

該当のソースコード

HTML <section id="feature"> <div class="fadein"> <div class="container"> <div class="tittle"> <h1 class="border">〇〇</h1> </div> <div class="feature-wrapper"> <div class="feature-box"> <div class="feature-img"> <img class="feature-image" src="./images/kodawari/kodawari1.jpg" alt="logo"> <img class="feature-en" src="./images/en/en.png" alt="logo"> <img class="sp-feature-en" src="./images/en/sp-en.png" alt="logo"> <span class="feature-about1">一、〇〇</span> </div> <div class="feature-text"> <p>〇〇</p> </div> </div> <div class="feature-box"> <div class="pc-feature-text"> <p>〇〇</p> </div> <div class="feature-img1"> <img class="feature-image1" src="./images/kodawari/kodawari2.jpg" alt="logo"> <img class="feature-en2" src="./images/en/en.png" alt="logo"> <img class="sp-feature-en" src="./images/en/sp-en.png" alt="logo"> <span class="feature-about2">二、〇〇</span> </div> <div class="sp-feature-text"> <p>〇〇</p> </div> </div> <div class="feature-box"> <div class="feature-img"> <img class="feature-image" src="./images/kodawari/kodawari3.jpg" alt="logo"> <img class="feature-en" src="./images/en/en.png" alt="logo"> <img class="sp-feature-en" src="./images/en/sp-en.png" alt="logo"> <span class="feature-about3">三、〇〇</span> </div> <div class="feature-text"> <p>〇〇</p> </div> </div> </div> </div> </div> </section> CSS .feature-box { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 120px; } .feature-box:nth-of-type(3) { padding-bottom: 0px; } .feature-text p { font-size: 20px; } .feature-text { font-size: 20px; flex-basis: 50%; } .pc-feature-text { font-size: 20px; } .sp-feature-text { display: none; } .feature-image { vertical-align: top; max-width: 100%; } .feature-image1 { vertical-align: top; max-width: 100%; } .feature-en { position: absolute; top: 30%; left: 22%; height: 50%; } .feature-en2 { position: absolute; top: 30%; left: 42%; height: 50%; } .feature-img { position: relative; flex-basis: 50%; } .feature-img1 { position: relative; flex-basis: 50%; text-align: right; } .feature-about1 { position: absolute; top: 47%; left: 23%; color: #fff; font-size: 1.43vw; } .feature-about2 { position: absolute; top: 47%; left: 30%; color: #fff; font-size: 1.43vw; } .feature-about3 { position: absolute; top: 47%; left: 25%; color: #fff; font-size: 1.43vw; }

試したこと

ロゴとテキストのサイズ指定を％で指定して、画面幅に応じて拡大縮小するようになりましたが、画像の真ん中からずれてしまいます。