環境:MacBook Chrome Atomエディタ
画像の大きさ:1920 × 1080
background-image ではなく、HTMLに画像として記述すると、
縮小した際、以下のように全体表示されます。
背景ではなく、HTMLで記述して画像を入れたほうが良いのでしょうか?
background-size: の、
cover、contain、値指定 auto、auto 値指定 は全て試しましたが、余計ズレてしまいました。
できれば背景画像で全体表示させたいです。
以下、コードになります。
また、レスポンシブ用スタイルシートの、
responsive.css コードは、とりあえず関係ないので載せていません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 8 <link rel="stylesheet" href="style.css"> 9 <link rel="stylesheet" href="responsive.css"> 10 <link rel="icon" href="img/airbnb_logo.ico"> 11 <title>現地の人から借りる家、体験&スポット - Airbnb</title> 12 </head> 13 <body> 14 15<header> 16 <div class="header-left"> 17 <a href="#"><img src="img/airbnb_logo.png"></a> 18 <div class="search"> 19 <i class="fas fa-search"></i> 20 <input type="text" placeholder="探す"> 21 </div> 22 </div> 23 <div class="header-right"> 24 <ul > 25 <li><a href="#">ホストをはじめる</a></li> 26 <li><a href="#">ヘルプ</a></li> 27 <li><a href="#">登録する</a></li> 28 <li><a href="#">ログイン</a></li> 29 </ul> 30 </div> 31</header> 32 33<div class="alert-wrap"> 34 <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show"> 35 <p> 36 <i class="far fa-comment-dots"></i> 37 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 38 </p> 39 <button class="close" data-dismiss="alert"> 40 × 41 </button> 42 </div> 43</div> 44 45<div class="top-wrapper"> 46 <div class="top-title"> 47 <h1>旅贈ろう。</h1> 48 <p>Airbnbギフトカードで、世界をぐんと身近に</p> 49 <a href="#" class="btn btn-lg">ギフトカードを登録</a> 50 </div> 51</div> 52 53<div class="test"> 54 <img src="img/water.jpg"> 55</div> 56 57 58 59 60 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 61 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 62 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 63 </body> 64</html> 65
CSS
1* { 2 box-sizing: border-box; 3} 4 5body { 6 margin: 0; 7 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 8} 9 10a { 11 text-decoration: none; 12} 13/* ----------↑上記は基本編集しない------------- */ 14header{ 15 padding: 20px 20px 20px 30px; 16 width: 100%; 17 height: 80px; 18 display: flex; 19} 20/* ------------ヘッダーのleft ------------*/ 21.header-left{ 22 flex-grow: 1; 23} 24 25.header-left img{ 26 width: 30px; 27 height: 30px; 28} 29 30/* textの青枠をoutlineで消す。伸び縮み時0.3秒かける。 */ 31.header-left input{ 32 width:410px; 33 border: none; 34 outline: 0; 35 font-weight: bold; 36 margin-left: 7px; 37 transition: 0.3s ; 38} 39 40/* ここ↓に何故inline-blockの必要があるのか。無いとズレるが。 */ 41.search{ 42 border: 1px solid #F8F8FF; 43 display: inline-block; 44 padding: 0.7rem 15px; 45 box-shadow: 1px 3px 2px rgba(0, 0, 0, .1); 46 border-radius: 3px; 47 margin-left: 17px; 48} 49.search i{ 50 font-size: 1.4rem; 51 color: #696969; 52} 53 54/* ------------ヘッダーの-right ------------*/ 55.header-right { 56 margin-top: 10px; 57} 58.header-right li{ 59 display: inline-block; 60 padding: 0 15px; 61} 62.header-right a{ 63 color: #444444; 64 font-weight: bold; 65 font-size: 13px; 66 text-decoration: none; 67 padding-bottom: 28px; 68} 69.header-right a:hover{ 70 border-bottom: 2px solid #444444; 71} 72 73/* ------------アラート ------------*/ 74.alert-wrap p{ 75 font-size: 14px; 76 font-weight: 400; 77 color: #484848; 78} 79.alert-wrap i{ 80 font-size: 2.4rem; 81 color: #4CB0BB; 82} 83.alert{ 84 padding: 0.5px 0; 85 line-height: 14px; 86} 87 88/* -----------top-wrapper------------ */ 89.top-wrapper{ 90 height: 500px; 91 width:100%; 92 background-image: url(img/water.jpg); 93 background-size: cover ; 94} 95 96 97 .test img{ 98 background-size: cover; 99 width:100%; 100 max-width: 100%; 101 height: auto; 102} 103
回答1件
あなたの回答
tips
プレビュー