【初月無料キャンペーン中】gooドクター

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

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

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

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

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

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

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

「画像の上にテキスト配置で、拡大縮小でずれ」の質問画像
gooドクター

A 回答 (2件)

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>
    • good
    • 0

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


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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング