Skeletonを使用してランディングぺージを作成しています。
トップのキャッチ画像部分で、元画像を画面いっぱいに表示したいのですが、サイズがうまく合いません。
background-size:cover;
ではだめなのでしょうか。
変えたい部分
section heroの img "phone"
やったこと
coverしたり
width,height100%にしたりした
上記試しましたがサイズ、下と右の方が切れていて、うまくあっていません。
ウィンドウサイズを横750以下にすると、縦はちょうどいい感じに表示されているようです。
原因わかる方お教え頂けますと幸いです。
css
1.hero { 2 background-image: url('../images/top_catch.png'); 3 background-repeat: no-repeat; 4 background-size: cover; 5 display: block; 6 width: 100%; 7 height: 100%; 8 color: #25C7AD; 9}
参考
html
1・・・ 2 <div class="section hero"> 3 <div class="container"> 4 <div class="one-half column phone"> 5 <img class="phone" src="images/iphone.png"> 6 </div> 7 <div class ="right-contents"> 8 <div class="one-half column"> 9 <h1 class="hero-heading">ヘッドコピー</h1> 10 </div> 11 <div class="three columns left-message"> 12 <h6 class="hero-subcopy">テキストテキスト</h1> 13 <a class="button button-primary" href="#">利用はこちらから</a> 14 </div> 15 <div class="three columns right-message"> 16 <h4 class="hero-subcopy">サブコピー的なもの</h1> 17 <img class="qr" src="images/qr_sample.png"> 18 </div> 19 </div> 20 </div> 21 </div> 22・・・ 23
css
1/* NOTE 2ベースが10pxなので1.5rem =15px) */ 3 4/* Shared 5–––––––––––––––––––––––––––––––––––––––––––––––––– */ 6.button { 7 border-radius: 100px; 8} 9/* Sections 10–––––––––––––––––––––––––––––––––––––––––––––––––– */ 11.section { 12 text-align: center; 13 height: 70vh; 14} 15.section.hero { 16 box-sizing: border-box; 17 height:60vh 18} 19/* Hero 20–––––––––––––––––––––––––––––––––––––––––––––––––– */ 21 22.hero { 23 background-image: url('../images/top_catch.png'); 24 background-repeat: no-repeat; 25 background-size: cover; 26 display: block; 27 width: 100%; 28 height: 100%; 29 color: #25C7AD; 30} 31 32.hero.hero-subcopy { 33 top:10rem; 34} 35 36.hero.hero-heading { 37 top:10rem; 38} 39 40 41 42/* Intro 43–––––––––––––––––––––––––––––––––––––––––––––––––– */ 44 45 46 47 48/* Bus Position 49–––––––––––––––––––––––––––––––––––––––––––––––––– */ 50.bus−position { 51 display: block; 52 background-image: url('../images/buses.png'); 53 background-size: cover; 54} 55.big-phone { 56 display: block; 57 float: right; 58 59} 60.bus-position.contents { 61 display: block; 62 float: left; 63 64} 65 66/* Bus Route 67–––––––––––––––––––––––––––––––––––––––––––––––––– */ 68 69 70/* Bus Operation Status 71–––––––––––––––––––––––––––––––––––––––––––––––––– */ 72.bus-operation-status{ 73 background-color: #AEFFEE; 74} 75 76/* Any Device 77–––––––––––––––––––––––––––––––––––––––––––––––––– */ 78 79.any-device { 80 background-image: url('../images/any_device.png'); 81 background-size: cover; 82} 83.devices { 84 display: block; 85 box-sizing: border-box; 86 top: 0; 87 left: 0; 88 width: 100%; 89 height: 100%; 90 91} 92 93 94/* Footer 95–––––––––––––––––––––––––––––––––––––––––––––––––– */ 96.footer { 97 background-color: #17C0FF; 98 margin-bottom: 10px; 99 padding: 8rem 0 7rem; 100 text-align: center; 101} 102 103p.footer-operation{ 104 color:white; 105} 106p.footer-inquiry{ 107 color:white; 108} 109p.footer-mail{ 110 color:white; 111} 112 113 114 115/* Media 116–––––––––––––––––––––––––––––––––––––––––––––––––– */ 117 118@media (min-width: 400px) { 119 .phone { 120 position: absolute; 121 top: 0.5rem; 122 left: -1rem; 123 max-height: 362px; 124 z-index: 3; 125 } 126 127 .qr { 128 max-height:50px; 129 } 130 131} 132 133/* Bigger than 550 */ 134@media (min-width: 550px) { 135 .section { 136 padding: 12rem 0 11rem; 137 } 138 .hero { 139 padding-bottom: 12rem; 140 text-align: left; 141 height: 165px; 142 } 143 .phone { 144 position: absolute; 145 top: 0.5rem; 146 left: -1rem; 147 max-height: 362px; 148 z-index: 3; 149 } 150 .phone + .phone { 151 top: -6rem; 152 display: block; 153 max-width: 73.8%; 154 left:2rem; 155 z-index: -7; 156 max-height: 640px; 157 } 158 .hero-heading { 159 font-size: 3rem; 160 margin-top: 4rem; 161 } 162 163 .qr { 164 max-height:80px; 165 } 166} 167 168 169 170/* Bigger than 750 */ 171@media (min-width: 750px) { 172 .hero { 173 height: 190px; 174 } 175 .hero-heading { 176 font-size: 4.4rem; 177 } 178 .section { 179 padding: 14rem 0 15rem; 180 } 181 .hero { 182 padding: 16rem 0 14rem; 183 } 184 185 .phone { 186 top: -8rem; 187 left: 2rem; 188 max-height: 720px; 189 } 190 191 .qr { 192 max-height:120px; 193 } 194} 195 196/* Bigger than 1000 */ 197@media (min-width: 1000px) { 198 .section { 199 padding: 20rem 0 19rem; 200 } 201 .hero { 202 padding: 22rem 0; 203 } 204 .hero-heading { 205 font-size: 5.0rem; 206 right: -5rem; 207 } 208 .phone { 209 top: -11rem; 210 max-height: 990px; 211 max-width: 468px; 212 left:5rem; 213 } 214 215 .qr { 216 max-height:140px; 217 } 218 .big-phone { 219 max-height:1091px; 220 221 222 } 223 224}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/18 05:46