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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/11/22 15:20:09
  • 終了:2017/11/23 22:15:36

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4619ベストアンサー獲得回数19552017/11/22 18:07:21

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

id: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>
2017/11/23 22:14:42

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません