グリッドアイテムにbackgroud-colorを適応しても思った通りに適応されない(一部要素にしか適応されない)

Question

実現できないこと

CSS3のGridアイテムにbackground-colorが思っているように適応できない(備考参照)

発生している問題

・imgタグにしかbackground-colorが適応されていない
・imgタグをコメントアウト(=削除)するとh3,pタグに適応される。

該当のソースコード

*{
  list-style: none;
      margin: 0%;
    padding: 0%;
}
img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.title{
 margin: 20px 350px 0px;
    text-align: center;
    padding: 15px;
    color: #474747;
    background: whitesmoke;
    border-left: double 7px #4ec4d3;
    border-right: double 7px #4ec4d3;
}
#showcase{
    padding-top:20px;
    background-color: #1438A6;
}
    #case{
        margin: 50px 50px 0px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 75px 50px;
    }
.case-box{
            color: #000000;
            box-sizing: border-box;
            padding: 15px;
            background-color: #fff;
            box-shadow: 7px 7px 10px #2a2a2ad2;
        }

    <div id="showcase">
    <div class="title">
        <h2>作ったもの</h2>
      </div>
    <ul id="case">
      <li class="case-box">
        <!-- <img src="https://placehold.jp/500x500.png" alt=""> -->
          <a href="#"><h3>タイトルタイトル</h3></a>
        <p>説明説明説明説明説明説明説明説明説明説明説明</p>
      </li>
      <li class="case-box">
        <!-- <img src="https://placehold.jp/500x500.png" alt=""> -->
        <a href="#">
          <h3>タイトルタイトル</h3>
        </a>
        <p>説明説明説明説明説明説明説明説明説明説明説明</p>
      </li>
      <li class="case-box">
        <img src="https://placehold.jp/500x500.png" alt="">
        <a href="#">
          <h3>タイトルタイトル</h3>
        </a>
        <p>説明説明説明説明説明説明説明説明説明説明説明</p>
      </li>
      <li class="case-box">
          <img src="https://placehold.jp/500x500.png" alt="">
          <a href="#">
            <h3>タイトルタイトル</h3>
          </a>
          <p>説明説明説明説明説明説明説明説明説明説明説明</p>
        </li>
    </ul>
  </div>

(コピペで正常に動作することを確認済み)

備考

・Firefox71.0(投稿時最新Ver)
・GoogleChrome79.0.3945.88(投稿時最新Ver)でも確認済み
・親要素のサイズがおかしい(なぜかh3タグ、pタグがサイズに含まれていない(表記上は含まれている(はず)))

・いろいろググりましたが、全然出てこないので質問させてもらいます。よろしくお願いします！

Answer 1

特にどちらが仕様的に正しい動きなのかはわかりませんが、imgにheight: 100%;を付けているために起こるのでは。

img{ /* Firefoxで確認 */
    object-fit: cover;
    width: 100%;
    /* height: 100%; */
}
```**動くサンプル：**[https://jsfiddle.net/pjync19q/](https://jsfiddle.net/pjync19q/)

Comments

[mira_tech]

回答ありがとうございます！無事に解決させていただきました！！
imgを中央寄せする際に利用していたプロパティだったのですが、まさかそいつが悪さをしてるとは...

Answer 2

CSS3のGridアイテムにbackground-colorが思っているように適応できない

このコードだとGridアイテムは .Case-box になりますが、background-color: #fff;は適応されていますが。どの部分のことを言っているのですか。

親要素のサイズがおかしい(なぜかh3タグ、pタグがサイズに含まれていない(表記上は含まれている(はず)))

呈示のコードで Codepen で動作確認してみましたが、親要素にh3タグ、pタグは問題なく含まれています。提示以外のCSSがあるのでは。

動作確認用Codepen

Comments

[kei344]

To: hatena19さん
Windows の Firefox では再現しましたよ。