趣味とポートフォリオを兼ねて自分が主催しているダンスイベントのサイトを作っています。
配置は基本的な構成なのですが、トップ画像で問題発生。
縦長のサイズのトップ画像が、PCサイズからスマホサイズに可変しない。
Googleで調べてみると
img{width:100%;height:auto;}
とあったんですが、これだとスマホサイズにはなるんですが、今度はPCサイズに可変しなくなりました。
色々と試行錯誤した結果
.main-view.top-img{ width:100%;height:0;padding-top:50%;padding-bottom:80%;background-image:url("画像のファイル");background-size:cover;background-position:centercenter;background-repeat:no-repeat;}
これでスマホサイズにもPCサイズにも可変するようになりました。
ヘッダー下にdivタグを作成して、CSSにバックグラウンドとして画像を挿入。
パディングの余白を%で追加することで縦長のフライヤーも出現しました。
画像の出し方一つでも色々な要素が出てくるので、一つずつ理解していきたいです。