画像の上にテキスト配置で、拡大縮小でずれないようにする方法についてアドバイス願います。

締切済

質問者：yuyukina
質問日時：2021/09/24 22:01
回答数：2件

何度も話題になっている内容だと思うのですが、色々と調べてみてもやっぱり理解しきれないので、申し訳ありませんがアドバイスをお願いいたします。

タイトルの通りなのですが、行いたいことは、画像の上にテキストを掲載し、ブラウザの拡大縮小、またはスマホなどでも同じような比率で表示する方法についてです。
添付した画像を見て頂きたいのですが、白いテキストフィールド風のところに文字（テキスト）を配置したい場合に、どのように行えばレスポンシブ時に、画像の拡大縮小が生じても、文字を同じ状態（比率）で表示することができますでしょうか？

またこれを実現するためには、仮に、

<div class="box"></div>　背景画像として？
<div class="box"><img src="hoge.png" …></div>　直接画像をセットするのか？？

のようなボックスを用意し、そもそも画像をこの中に実態として入れてしまって、position:relative;を
親のboxに定義して、中の画像をposition:absolute;で指定するのか？
そうでは無く、画像をbackgroundとして背景にし、その上にテキストとして白枠内のテキストを被せて設定するのか、どちらが良いのか？そもそもどちらも正しくないのかもしれませんが、根本的な方法が良くわかりません。

調べていく中で、こういった場合には、vw vh といった単位で指定するのが便利なような情報を拝見いたしますが、こちらも試すのですが、いまいち、どのときにvwを使うのか？vwを使った場合には、vhは使わなくてよいのか？
この辺りの2つの使い方、定義方法も良くわからず試してみましたが、余白などやはり拡大と縮小で変わってしまいます。

大変申し訳ありませんが、背景画像にテキストを乗せて比率を保持する方法についてアドバイスを頂けないでしょうか？
何卒よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： gura_
回答日時：2021/09/26 16:18

yuyukina さん

･････背景画像にテキストを乗せて比率を保持する方法･･･････

自分が好きな方法ですれば良いのではないですか。

デバイスサイズに合わせるなら、サイズ基準は幅になるので、vh でなく vw基準で指定したら如何ですか。

なお、上で示されたような例では、私も画像を使わない方法が良いと思います。

参考例↓

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1{ position:relative; width:40vw; height:40vw; display:flex; justify-content:center; align-items:center;
background: url(https://oshiete.xgoo.jp/images/v2/common/profile … background-size: 100% 100%;
}
p{ width:60%;
}
.box2{ position:relative; width:40vw; height:40vw; display:flex; justify-content:center; align-items:center;
}
.box2 p{ 1position:absolute; width:60%; 1margin:0 auto; z-index:5; }
.box2 img{ position:absolute; top:0; width:100%; height:100%; }
</style>
</head>
<body>
<div class="box1">
<p>背景画像にテキストを乗せて比率を保持する</p>
</div>
<div class="box2">
<p>背景画像にテキストを乗せて比率を保持する</p>
<img src="https://oshiete.xgoo.jp/images/v2/common/profile …
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
下でも書かせて頂きましたが、あくまで画像はイメージのつもりで拡大縮小してもテキストエリア風の白枠内に文字が現在の比率で収まるイメージをお伝えしたかったです。
頂いた参考HTMLでは文字が固定なので小さくすると画像を飛び出してしますようですし、画像と文字の比率という意味では拡大縮小で比率が変わってしまうようす。
やはりブレイクポイントを明確に決めて、コツコツ計算して設定したいと思います。
有難うございました。

通報する

お礼日時：2021/11/04 18:19

No.1

回答者： naokita
回答日時：2021/09/25 17:14

質問での謎は、写真に見出しなどを合わせるパターンはあり、背景100％やVWを駆使するのですが、

添付画像を見ると、あれあれ？と思いました・・・

その添付画像のようなコンテンツだとして、
・そのコンテンツは、お問い合わせとかアンケートのフォームですよね？
・背景画像というのは、「お名前」と「感想」などのテキストですよね？
・そのテキストを背景画像にしちゃう理由がわかりません・・・
それなら、
<dl>
<dt>お名前</dt>
<dd><input ></dd>
<dt>感想</dt>
<dd><textarea ></dd>
</dl>
背景画像を使わずとも、これだけで済んでしまい、何かとても無駄なことをしようとしていると想像しますので、
「比率」「position」「VW」を使う必要はないと思うのですが・・・