div内で１つの画像を横幅全体に表示する方法について
https://news.yahoo.co.jp/feature/298
こちらのサイトのように画像を横幅一杯にして、文字を挿入する表示方法を教えてください。
【yahooの該当部分ソース】
<div class="headImage">
<div class="headCover">
<div class="thumbnail" style="background-image:url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg)"></div>
<p class="headInfo source">
</p>
<div class="headInnr">
<h1>子どもの貧困「見えにくい」現実</h1>
<p class="headInfo time">1/31(火) 18:29 配信</p>
</div><!-- /.headinnr -->
</div><!-- /.headCover -->
</div><!-- /.headImage -->
画像はこちら
https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg
サイズは1500x1000でした。
全く同様のものをつくりたいのですが、どのようにCSSで構築したらいいのでしょうか？
ベストアンサー
-
a-kuma3
満足200pt
「全く同様」という微妙な表現ですが、エッセンスを抽出してみました。
<!DOCTYPE html> <html lang="ja"> <head> <style> #x { width: 100%; height: auto; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-image: url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg); border: 2px solid orange; } #x::after { padding-top: 41.43%; /* ★1 画像の縦方向のサイズを調節 */ content: ""; display: block; } .y { position: absolute; bottom: 0; color: white; /* ★2 文字の見た目 */ width: 100%; } .z { position: relative; text-align: center; /* ★2 文字の見た目 */ } </style> </head> <body> <div class="z"> <div id="x"></div> <div class="y"> <h1>子供の貧困「見えにくい」現実</h1> </div> </div> </body> </html>
「画像を表示する要素と、文字を表示する要素を重ねて表示する」というところが質問の主題なのだと解釈しました。
class="z" の要素の幅いっぱいに合わせて画像を表示して、その中に文字を表示します。
画像は、縦方向で見切れています。
縦方向のサイズを指定して、それっぽくしているだけです（★1）。
CSS の background 系では、見た目の大きさは、あくまでも、それを抱えている要素の大きさなので、画像の全体を表示したいのであれば、background-image ではなく img タグを使うべきところだと思います。
★2は、重ねた文字の領域をどう表示するかなので、好きにしたらええやん、という部分です。
元ページでも、微妙な感じでタイトルに改行が入りますし。
正直なところ、文字の背景に画像を表示するなら、別の要素に指定するんじゃなくて、<div> <!-- ここに、css で背景画像の指定 --> <h1>子供の貧困「見えにくい」現実</h1> ... </div>
という方が、HTML 的に素直だろう、という気がします。
-
その他の回答
この質問へのコメント
質問の情報
- 登録日時
- 2017-11-22 15:20:09
- 終了日時
- 2017-11-23 22:15:36
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
はてなって何を仕事にしている会社なんですか？ 必須資格などはあるのでしょうか？ 現在求人などはしていま…
匿名質問者
2
2
1
-
無職の人間がコメント連投ばっかりしてたら、どうなりますか？匿名質問者1
-
ホームレスの人間が倒れたら、見つかりますか？匿名質問者
-
医療脱毛の件ですが、教えていただけますか。レーザー照射とかで痛いと言われる脱毛です。永久脱毛（半永久…匿名質問者
-
東方のグッズがあるゲームセンター教えて下さい
山田生活