Q&A
試したコードとスクリーンショットも提示されてはいかがでしょう。
環境：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
スクショしても、ファイルサイズが大きい為、張る事ができません。
`top-wrapper`クラスに高さが設定してありますが、背景画像はこの高さにならなければなりませんか？
s8_chuさん。いいえ、高さは他の高さでも大丈夫ですが、おおよそ550px〜600pxくらいが理想です。というより、heightを指定しないとそもそも背景画像が現れなかったです。
もうひとつ質問なのですが、今回質問者さんが行いたい画像の全体表示では、画像の全体を表示できれば、余白があっても構わないのでしょうか？
余白は https://www.airbnb.jp/gift このサイトのように無しが良いです。
「全体」という言葉のチョイスがややおかしかったかも知れません。
多少は削れても大丈夫です。
background-position: center center; を追加したら、理想に近くなりました、（今度は左が消すれますが）
上記サイトと同じ画像で試しましたが、やはり上記サイトのようになりませんでした。
> 上記サイトと同じ画像で試しましたが、やはり上記サイトのようになりませんでした。
参考に挙げているサイトでは、画面サイズが小さくなったとき画像の上下または左右のどちらかが切り取られています。そのため、参考サイトの動作と質問者さんの実現したいことは違うと思います。
と思ったら、画像の一部は切り取られても良いとのことでしたね。失礼しました。
回答1件
0
ベストアンサー
background-position: center center; を追加したら、理想に近くなりました、（今度は左が消すれますが）
以下のような CSS を指定したとき、画面のサイズが小さい場合に画像が削れてしまう現象は、質問者さんが参考にしているサイトでも発生しています。
CSS
1.top-wrapper { 2 height: 500px; 3 width: 100%; 4 background-image: url(https://unsplash.it/1920/1080); 5 background-size: cover; 6 background-position: center center; 7}
この動作により画像が切り取られてしまうことを防ぐため、参考サイトでは、メディアクエリにより背景画像を表示する要素の高さを変化させています。そのため、メディアクエリを使用すれば、質問者さんの実現したいことが行えると思います。
CSS
1.hero-image-container { 2 position: relative; 3 height: 600px; 4 overflow: hidden 5} 6 7@media (max-width: 743px) { 8 .hero-image-container { 9 height:400px 10 } 11}
投稿2019/03/29 12:26
総合スコア14731
やっとできました。何故できたかの理由も追求します。
ありがとうございます。
ポイントはメディアクエリの要素の高さ変更ですね。
ですが、この overflow: hidden は果たして意味があるのでしょうか？
付けるバージョンと付けないバージョンでは全く同じに見えます。
私の認識では付けると、例えばテキストなどが幅をはみ出した場合に、「はみ出た部分のみ」を消すという感じです。
あなたの回答
tips
プレビュー
