疑問点
下のような背景画像を張っているのですが、フルスクリーン画面とそうでない場合で画像の表示が異なるのですが、
2.1/2画面の場合
サイズの関係上画像は貼れなかったのですが、上の画像が拡大されて、足などが切れてしまっている状態で、
少し画質も悪くなっているような気がします(これは仕方ないのかな)。
###実現したいイメージ
画面を小さくしても、なるべくフルスクリーンの場合と同じようにできないかなと考えています。
レスポンシブ対応はまだしていないので、話はそれからということなのかなと個人的には予想していますが、、、
該当のソースコード
HTML
1<main> 2 <div class="hero-image-container"> 3 <div class="hero-image-picture" style="background-image: url('...');"> 4 <div class="hero-image-overlay"> 5 <div class="va-container"> 6 <div class="va-middle"> 7 <div class="main-text-top">...</div> 8 <div style="margin-top: 16px;"> 9 <div class="main-text-middle">...</div> 10 </div> 11 <div style="margin-top: 32px;"> 12 <a href="" class="gift-register" aria-busy="false"> 13 <span class="main-text-bottom">...</span> 14 </a> 15 </div> 16 </div> 17 </div> 18 </div> 19 </div> 20 </div> 21</main>
CSS
1/* main */ 2.hero-image-container { 3 position: relative; 4 overflow: hidden; 5 width: auto; 6 height: 600px; 7} 8.hero-image-picture { 9 position: absolute; 10 left: 0; 11 right: 0; 12 top: 0; 13 bottom: 0; 14 background-size: cover; 15 background-position: center; 16 17 18} 19.hero-image-overlay { 20 height: 100%; 21 width: 1080px; 22 margin-left: auto; 23 margin-right: auto; 24 padding: 0 24px; 25} 26.va-container { 27 display: table; 28 position: relative; 29 height: 100%; 30 width: 100%; 31} 32.va-middle { 33 display: table-cell; 34 vertical-align: middle; 35} 36.main-text-top { 37 color: white; 38 font-size: 46px; 39 font-weight: 800; 40 overflow-wrap: break-word; 41 padding: 8px 0; 42 line-height: 1.13em; 43} 44.main-text-middle { 45 color: white; 46 font-size: 18px; 47 font-weight: 400; 48 overflow-wrap: break-word; 49 line-height: 1.44em; 50} 51a.gift-register { 52 display: inline-block; 53 padding: 10px 22px; 54 width: auto; 55 color: #484848; 56 background-color: white; 57 border-color: transparent; 58 border-width: 2px; 59 border-style: solid; 60 border-radius: 4px; 61 line-height: 24px; 62} 63span.main-text-bottom { 64 font-size: 16px; 65 font-weight: 800; 66}
まだ初心者なので、初歩的な質問なのかもしれません、ご返答お願いいたします。
###問題が発生した環境
- HTML5
- CSS
回答1件
あなたの回答
tips
プレビュー