Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

大きい画像をスマホで見たときに縮小する方法

$
0
0

趣味とポートフォリオを兼ねて自分が主催しているダンスイベントのサイトを作っています。

 

 

 

 

 

 

配置は基本的な構成なのですが、トップ画像で問題発生。

 

縦長のサイズのトップ画像が、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にバックグラウンドとして画像を挿入。

 

パディングの余白を%で追加することで縦長のフライヤーも出現しました。

 

 

 

 

画像の出し方一つでも色々な要素が出てくるので、一つずつ理解していきたいです。


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>