Q&A
Lhankor_Mhyさん
おぉ！ありがとうございます！
おかげさまで解決しました。
よろしくお願いいたします。
前提・実現したいこと
①ヘッダーの<div class="bg_about">に設定したimg(snappersロゴに重ねている画像)の高さを
補足情報にある1枚目の添付デザインカンプに写っているリュックの底のところで見切れているようにしたい。
該当のソースコード
HTML
1 <!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <title>snappers</title> 10</head> 11 12<body> 13 <!-- ヘッダー開始--> 14 <header> 15 <div class="bg_about"> 16 <a href="#"><img src="img/bg-about.jpg" alt="bg-about" class="about"> 17 </a> 18 </div> 19 </header> 20</body> 21</html>
CSS
1bg_about { 2 width: 1260px; 3 margin: 0 auto; 4} 5 6img.about { 7 width: 1260px; 8 height: 320px; 9} 10
試したこと
1枚目の添付デザインカンプからトップのimg(snappersに重ねている画像)幅(1260px)と高さ(320px)を参考に
下記の通り設定してみるが2枚目画像素材の高さをそのままに小さく表示される。
①<header>に.header { width: 1260px;margin: 0 auto;}を設定。
②<a href="#"><img src="img/bg-about.jpg" alt="bg-about" class="about">にimg.about { width: 1260px; height: 320px; }
補足情報（FW/ツールのバージョンなど）
ブラウザ環境 chrome
回答2件
0
CSS
1.bg_about { 2 width: 1260px; 3 height: 320px; 4 margin: 0 auto; 5 overflow:hidden; 6} 7 8/* 9img.about { 10 width: 1260px; 11 height: 320px; 12} 13*/ 14
※ベストアンサーが決まるタイミングでの投稿です。すみません。
投稿2020/06/23 03:46
編集2020/06/23 04:07
総合スコア349
0
ベストアンサー
こんにちは。
これでいかがでしょうか。
css
1img.about { 2 object-fit: cover; 3 object-position: center top; 4}
参考：
object-fit - CSS: カスケーディングスタイルシート | MDN
object-position - CSS: カスケーディングスタイルシート | MDN
投稿2020/06/23 02:51
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。