背景画像の上に、比率を保持して画像を表示する方法を教えてください。

解決済

質問者：yuyukina
質問日時：2017/01/17 12:09
回答数：2件

とても悩んでおりまして、お詳しい方何卒アドバイスをお願いいたします。

現在レスポンシブのサイトを作っているのですが、画像の位置の比率の部分で躓いてしまってます。
具体的には、添付の画像を見て頂けたらと思うのですが、要は背景画像の上に配置した星形の画像の位置が、画面を広くした場合も、狭めた場合も、同じ位置にくるようにしたいです。

<div id="haikei">
<div id="hoshi"><img src="hoshi.png"></div>
</div>

ブラウザ幅を広げたり狭めると、この星画像の位置が微妙にずれはじめ、吹き出しの外に飛び出したり、上に上がったり定まりません。色々試行錯誤しているのですが…。

背景にはbackground-size:cover;を定義して、常に画面いっぱいに背景が表示されるようにしています。星画像の表示には、
position: absolute;
top: 20%;
left: 35%;

といった具合に、positionを指定しています。

背景と星画像の位置を、常に一定にする方法がありましたら、全く別の方法でも結構ですのでアドバイスを頂けたらと思います。
どうぞ宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： t_fumiaki
回答日時：2017/01/17 13:39

高さに基準は無い為、レスポンシブのハマリどころです。

で、％の高さ指定は削除して

・強引に高さ基準を作る。
・星の画像も背景と一緒に拡大・縮小。

この２点を同時に行なう例。

htmlはそのまま、cssで調整する。

#haikei {　
width: 100%;
height:0; ←ここがミソ必ず0にする
background:url(haikei.png) top no-repeat;
background-size:cover;
padding-bottom:100%; ←ここがミソ。値は調整する。
}

#hoshi {
position: relative;　←必ず relativeにする。
left: 30%;　←topは機能しないから削除。値は調整
padding-top:15%;　←ここがミソ。topの代わり。値は調整
}

#hoshi img {width:25%;}　img画像も拡大・縮小、値は調整

- 0
- 件

通報する

この回答へのお礼

説明不足にも関わらず適切なアドバイス有難うございました。
無事、希望する表示を行うことが出来ました！
今回の設定方法はレスポンシブでは必須ですね、大変勉強になりました。
重ねて感謝申し上げます。

通報する

お礼日時：2017/01/18 11:55

No.2

回答者： ORUKA1951
回答日時：2017/01/17 14:46

質問がわかりません。

<div id="haikei">
<div id="hoshi"><img src="hoshi.png"></div>
</div>
　こんなclass名はつけませんがそれは置いておいて、hishi.jpgは、吹き出しも含むのですか？それとも吹き出しは背景にあるのですか？

　なお、HTMLは文書構造しか記述しませんので、このHTML自体あまり良くない。
例えば、本文内の記事でしたら・・
<body>
　<header>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<ol>
　　　<li>質問１
　　　　<p>なんたらかたんら</p>
　　　</li>
等の場合に、
　body>section>ol>li 要素に背景画像を指定して、liの頭に(?)の画像を付け加える。
　なら簡単ですよね。

もう２点
・背景画像の上に配置した星形の画像
　　のサイズは変えないでよいのか
・背景画像は、デザインがあってその画像の特定の位置に表示したいのか
　それとも、背景画像の左上端から、特定の比率の位置(または座標)に表示したいのか

など肝心なことがわかりません。

　基本は「HTML 4による文書の設計( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」で、HTMLには、プレゼンテーションに関わるものは一切書かないで、プレゼンテーションはスタイルシートで指定する。
　そうしないと、思ったようにデザインできませんし、デザインの変更もできない。