トップページ画像が上手く表示されない

質問一覧Category: Landscapeトップページ画像が上手く表示されない
YuukiYuuki asked 5か月 ago

Landscape を使っているのですが、スマートフォンで見ると画像が切れなく表示されていりのですがパソコンで見てみると画像が切れてしまいます。画像を縮小してみてもうまくいかず、、どうすれば良いですか?
https://vapeyk.theshop.jp
こちらがウェブサイトです。

1 Answers
BaseDesignInfoBaseDesignInfo Staff answered 5か月 ago

ご質問ありがとうございます。
パソコンのように横長の画面のときに、イラストの大事な部分の上下が切れるということですね。

この場合は、画像全体を縮小するのではなく、画像の中の余白を調節することでうまくいくと思います。

今はこうですが、余白に余裕がないので重要な部分が切れやすくなります。

黒の余白を増やして、例えばこのようにします。
トラを縮小したのではなく、余白を大きくして画像自体が大きくなったものです。

するとイラスト部分がぎゅっと中央によりますので、引き伸ばされて画質が落ちることなく、また画面サイズの変化を黒の余白部分で吸収することができます。
黒の余白がどのくらいだと良いかは好みがあると思いますので、いろいろ試してみてください。
上の画像は以下からダウンロードできます。
https://basedesign.info/z/wp-content/uploads/2018/05/image-MainVisual1_5b098b09692de1.jpg

YuukiYuuki replied 5か月 ago

ありがとうございました!無事に表示することが出来ました。