Q&A
二点ほど。
この質問では、質問タグの、コードレビューと文字コードは関係ないと思います。
また、記載されているのは、CSSではなく、SCSSになりますので、そこは直した方がいいかと。
付随して、SCSSをコンパイルした、CSSコードを記載していただけないでしょうか？
前提・実現したいこと
background-imageで指定した画像を画面幅に合わせて縮小するようにしたい。
発生している問題・エラーメッセージ
height:auto;を指定すると画面から消えてしまう。
該当のソースコード
html
1<div class="main-images"> 2 <p class="main-images__img"> 3 <img src="" alt=""> 4 </p> 5 6 <h1 class="main-images__img main-images__2"> 7 <section class="main-images__texts"> 8 <p class="main-images__title"><span class="border"></span></p> 9 <div class="main-images__wrapper"> 10 <div class="main-images__text"> 11 <p class="main-images__price"><span class="large"></span></p> 12 <p class="main-images__oneday"></p> 13 </div> 14 <div class="main-images__btn"> 15 <p><a href="#"></a></p> 16 </div> 17 </div> 18 19 </section> 20 </h1> 21 22 <p class="main-images__img"> 23 <img src="" alt=""> 24 </p> 25 </div> 26
scss
1.main-images{ 2 text-align: center; 3 .main-images__img{ 4 display: block; 5 img{ 6 width: 98%; 7 } 8 &:not(:last-child){ 9 margin-bottom: 20px; 10 } 11 &:last-child{ 12 margin-bottom: 30px; 13 } 14 } 15 .main-images__2{ 16 background-image: url(); 17 width:98%; 18 margin: 0 auto; 19 height: 300px; 20 background-size: cover; 21 margin-bottom: 30px; 22 position: relative; 23 .main-images__texts{ 24 position: absolute; 25 bottom: 10%; 26 left: 15%; 27 font-size: 20px; 28 .main-images__title{ 29 margin-bottom: 10px; 30 .border{ 31 border: 1px solid; 32 } 33 } 34 .main-images__wrapper{ 35 display: flex; 36 .main-images__text{ 37 margin-right: 10px; 38 .main-images__price{ 39 .large{ 40 font-size: 30px; 41 } 42 } 43 .main-images__oneday{ 44 display: inline-block; 45 color: $images-color; 46 background-color: $images-back; 47 border-radius: 20px; 48 padding: 10px; 49 } 50 51 } 52 53 .main-images__btn{ 54 p{ 55 margin-left: 10px; 56 57 a{ 58 display: inline-block; 59 padding: 30px; 60 background:linear-gradient($images-btn1,$images-btn2) ; 61 text-decoration: none; 62 color:$images-btn__color; 63 border-radius: 5px; 64 opacity: 0.8; 65 transition: all ease 0.8s; 66 &:hover{ 67 opacity: 1; 68 } 69 70 } 71 } 72 } 73 } 74 } 75 } 76 }
css
1.main-images { 2 text-align: center; 3} 4 5 .main-images .main-images__img { 6 display: block; 7} 8 9 .main-images .main-images__img img { 10 width: 98%; 11} 12 13 .main-images .main-images__img:not(:last-child) { 14 margin-bottom: 20px; 15} 16 17 .main-images .main-images__img:last-child { 18 margin-bottom: 30px; 19} 20 21 .main-images .main-images__2 { 22 background-image: url(../../image/jp_top_herobanner_father_n360.png); 23 width: 98%; 24 margin: 0 auto; 25 height: 300px; 26 background-size: cover; 27 margin-bottom: 30px; 28 position: relative; 29} 30 31.page-main .main-images .main-images__2 .main-images__texts { 32 position: absolute; 33 bottom: 10%; 34 left: 15%; 35 font-size: 20px; 36} 37 38.main-images .main-images__2 .main-images__texts .main-images__title { 39 margin-bottom: 10px; 40} 41 42.page-main .main-images .main-images__2 .main-images__texts .main-images__title .border { 43 border: 1px solid; 44} 45 46.page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper { 47 display: -webkit-box; 48 display: -ms-flexbox; 49 display: flex; 50} 51 52.main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text { 53 margin-right: 10px; 54} 55 56.page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text .main-images__price .large { 57 font-size: 30px; 58} 59 60.page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__text .main-images__oneday { 61 display: inline-block; 62 color: red; 63 background-color: #fff; 64 border-radius: 20px; 65 padding: 10px; 66} 67 68.main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p { 69 margin-left: 10px; 70} 71 72.page-main .main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p a { 73 display: inline-block; 74 padding: 30px; 75 background: -webkit-gradient(linear, left top, left bottom, from(#119103), to(#006c13)); 76 background: linear-gradient(#119103, #006c13); 77 text-decoration: none; 78 color: #fff; 79 border-radius: 5px; 80 opacity: 0.8; 81 -webkit-transition: all ease 0.8s; 82 transition: all ease 0.8s; 83} 84 85.main-images .main-images__2 .main-images__texts .main-images__wrapper .main-images__btn p a:hover { 86 opacity: 1; 87} 88
試したこと
height:auto;
background-size:98% auto;を指定してみたが固定値でおかないと画面から消えてしまう。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
main-images__2 の子要素に中身がないし、高さも設定されていないので、height:auto; にすれば、main-images__2 の高さは 0 になり、背景画像は当然表示されません。
例えば、子要素に下記のように内容テキストを入力するか、
html
1 <p class="main-images__price"><span class="large">テキスト</span></p>
あるいは適切なheight:を設定すれば背景画像は表示されます。
投稿2020/05/17 11:24
総合スコア34075
あなたの回答
tips
プレビュー
