コーディング学習サイトをみて勉強しているのですが、
指定した画像が表示されません。
画像の指定方法が2つあるのですが、 2つほど画像が表示されません。
1つめは
<!--background-imageをつかった場合--> <a href="" class="card"> <div class="card-inner"> <div class="card-img" style="background-image: url(/images/card-image.jpg);"></div> <div class="card-body"> <time class="card-time" datetime="YYYY-MM-DD">YYYY/MM/DD</time> <p class="card-title">テキストテキストテキストテキスト</p> </div> </div> </a> /*background-imageをつかった場合*/ .card { display: block; max-width: 400px; box-shadow: 5px 5px 20px rgba(196, 196, 196, 0.5); background-color: #F5F6F8; } .card-inner { padding: 15px; } .card-img { padding-top: (3 / 4 * 100%); background-repeat: no-repeat; background-size: cover; background-position: center; } .card-time { font-size: 12px; color: #767676; } .card-title { color: #333; font-size: 14px; }
2つめは画像を直接指定した場合です
<!--background-image を使わない場合--> <a href="" class="card"> <div class="card-inner"> <div class="card-img2"> <img src="/images/card-image.jpg" alt="" /> </div> <div class="card-body"> <time class="card-time" datetime="YYYY-MM-DD">YYYY/MM/DD</time> <p class="card-title">テキストテキストテキストテキスト</p> </div> </div> </a> /*background-imageを使わない場合*/ .card-img2 { padding-top: (3 / 4 * 100%); position: relative; } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
下記はテスト環境URLです
リンク内容
比率を保ちながら画像を拡大縮小させる方法
上記の参考サイトをみながらソースを書いたのですが、画像がでませんでした。
やったこと
画像を直接
<img src="/img/www.jpg/">
のように表示したら画像はでました。
card に
height:auto;
を指定しても駄目でした。
回答1件
あなたの回答
tips
プレビュー