画像の幅についての質問です。

<div class="parent">
      <img class="frame " src="fame.png" alt="frame">
      <div class="child">
      <div class="text"> text text text </div>
      </div>
    </div>

.parent{
  position: relative;
}
.parent img{
  width: 50vw;
}
.text{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 1.8rem;
  margin: 50px auto;
}

フレームの画像の中にテキストを入れたいです。
上記はPC用でフレームの画像をvwで指定し、テキストを中央にくるように指定しているのですが、
画面幅を狭め、画像がある程度まで縮んだ際に、
画面からフレームの画像をはみ出すように指定するにはどうしたらいいでしょうか。

様々なサイトでも調べてみたのですが、なかなか改善せずこちらで質問させていただきました。
初歩的な質問であることは承知しておりますが、
よろしくお願いいたします。

具体的な数字を言うと、
フレームの画像は画面中央に置いたままで、
フレーム画像がwidth:500pxになったらそのまま画面が縮小しても大きさを固定したいです。（500pxより画面幅が縮んだ場合、画像が左右にはみ出す）
文字列はPCの時と同様、フレーム画像の真ん中に配置をしたいです。

Lhankor_Mhy

2021/12/08 02:12

width: 50vw となっているので、画像は常にスクリーンの横幅の半分になっていると思います。ですから、「画像がはみ出す」というご心配には当たらないと思います。

Lhankor_Mhy

2021/12/08 02:13

ああ、すみません、画像をはみ出させたいということなのですね。

行動規範の内容に同意します

回答1件

ベストアンサー

メディアクエリを使って、width: 50vwを別の値（たとえば 110vw）にするのがいいかと思います。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

質問の追記を受けて追記

画像を背景にして、max-width でコントロールした方がいいように思えます。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/7o3hbrkm/

html
1  <div class="parent">
2    <div class="child">
3      text text text
4    </div>
5  </div>

css
1.parent {
2  display: flex;
3  justify-content: center;
4  overflow: hidden;
5}
6.child {
7  background: url(fame.png) center/contain no-repeat;
8  width: 50vw;
9  min-width: 500px;
10  aspect-ratio: 1 / 1;
11  display: grid;
12  place-items: center;
13}