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

質問一覧カテゴリー: Landscapeトップページ画像が上手く表示されない
YuukiYuuki 質問済み 4週間 前

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

1 件の回答
BaseDesignInfoBaseDesignInfo メンバー 回答済み 4週間 前

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

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

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

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

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

YuukiYuuki 3週間 前の返信

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