人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

div内で1つの画像を横幅全体に表示する方法について

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で構築したらいいのでしょうか?

●質問者: jamis
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●200ポイント ベストアンサー

「全く同様」という微妙な表現ですが、エッセンスを抽出してみました。

<!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 的に素直だろう、という気がします。


jamisさんのコメント
ありがとうございます。 指定されたソースで完全にできました。 最終的にはシンプルに考えて、以下の様にしました。 htmlのdivで画像をstyle指定しているのはそれぞれのページにおいてどの画像を使用しているのかわかりやすくするため。 >|| .bx { position: relative; clear:both; text-align:center; } .bx h1 { width: 100%; position: absolute; color:#FFF; text-align:center; top: 80%; left: 50%; margin-left: -50%; } .bx .img_bx { width: 100%; height: auto; position: relative; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border: 2px solid orange; } .bx .img_bx::after { padding-top: 41.43%; content: ""; display: block;} <div class="bx"> <div class="img_bx" style="background-image: url(https://giwiz-tpc.c.yimg.jp/q/tpc/images/story/2016/12/27/_1482790072_1482790063_22.jpg);"></div> <h1>子供の貧困「見えにくい」現実</h1> </div> ||<
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ