画面幅を狭めた時、背景画像と一緒に上にのせている要素も縮小するようにしたい

Question

実現したいこと

画面幅を狭めたときに、背景画像の上にのせている白いボックスが一緒に縮小するようにしたいです。
背景画像は画面幅いっぱいに表示される＋レスポンシブで設定しています。
https://jsfiddle.net/rupL3wfc/

発生している問題・エラーメッセージ

画面最大幅では背景（紅茶画像）の左のあたりに白いボックスが表示されますが、画面幅を縮小していくとこの白いボックスの位置がどんどんずれてしまいます。
背景画像との比率を保ったままうまく縮小する方法を教えてください。

該当のソースコード

<div id="wrapper">

<div class="Box">
<h2>タイトル</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

</div>

#wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url("https://www.pakutaso.com/shared/img/thumb/ellycollection074_TP_V.jpg") center / cover;
}

.Box {
  position: absolute;
  top: 50%;
  left: 29%;
  transform: translateY(-50%) translateX(-29%);
  -webkit-transform: translateY(-50%) translateX(-29%);
  -ms-transform: translateY(-50%) translateX(-29%);
  max-width: 392px;
  max-height: 357px;
  background: #fff;
  padding: 50px;
}

.Box h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

.Box p {
  margin-top: 25px;
  font-size: 12px;
  line-height: 35px;
}

試したこと

メディアクエリを使用して画面幅ごとに「left：29%」の数値を減らして調整してみましたが、メディアクエリの指定がたくさん増えてしまい、もっと他に適切なやり方があれば知りたいと思っています。

Answer 1

<div class="Box2">なかみはBoxと同じ</div>を追加した設定で、cssのみ記載します。

vw1920ぐらいのときは、例題とほぼ同じ配置です。
vw800ぐらいまでは使えるのでは、と思います

• vw1600以下ぐらいから、箱の幅を画面幅依存にしてみた(背景がそれぐらいから縮まなくなるため)
• transform の X を-50%にして、画面真ん中からLEFT分だけずれるようにしてみた。(X -50% だと、うんと横長でも位置合わせしやすい印象があるので)
• 背景を透過してるのは、例題の箱との違いを見る用

もっとカッコイイ回答もあると思います。ご参考になれば幸いです。

　　

#wrapper {
  position: relative; width: 100%; min-height: 100vh;
  background: url("https://www.pakutaso.com/shared/img/thumb/ellycollection074_TP_V.jpg") center / cover;
}

/*共通する部分*/
.Box2,
.Box{
  position: absolute;
  top: 50%;
  padding: 50px;
  border: 1px solid #fff;
  max-width: 492px;/*変更  ↓*/
  max-height: 457px;/*変更 ※↓paddingの分を含めたから*/
  box-sizing: border-box;/*新設*/

}
.Box2 h2,
.Box h2 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}
.Box2 p,
.Box p {
  margin-top: 25px;
  font-size: 12px;
  line-height: 35px;
}

/*以下、違う部分*/
.Box {
  transform: translateY(-50%) translateX(-29%);
  left: 29%;
  background: #ffffff66; 
}

.Box2{
  transform: translate(-50%,-50%);/*Xを-50%にすることで、画面真ん中からLEFTの分だけずれていく*/
  left: 34vw;
  width: 30vw;/*幅を画面幅基準に*/
  background: #ffff0088;
}
/* 1600▽ */ @media only screen and (max-width: 1600px) {
  .Box2{
    left: 29vw;
    padding: 3vw;/*余白が大きいので削っていく*/
    line-height: 1em;
  }
}/*△*/
/* 1200▽ */ @media only screen and (max-width: 1200px) {
  .Box2{
    width: 39vw;
    left: 21vw;
  }
}/*△*/

Comments

[mupo]

教えていただきありがとうございます！こちらの方法を使用させていただきました。