ノーコードデザインの「バナー画像」などの項目は、PCページでは幅いっぱいにバナー画像は表示され、スマホでは画像の左右がトリミングされる表示です。
登録した画像のサイズ、比率そのままで表示させたい場合は、保持するCSSを「HTMLセクション」に追記することで、登録した画像の比率のまま表示できます、（文字が入っている画像などを登録した際の調節としても活用いただけます）
表示例）
＜PCページ＞
＜スマホページ＞
対処方法
ノーコードデザインのテンプレート編集画面で、以下の手順によりCSSを追記します。
手順1) 対象ページの編集画面を開く
ノーコードデザイン編集画面にてメインのプルダウンから編集したいページ（トップページ／商品詳細／商品カテゴリなど）を選択してください。
手順2) 「＋セクションを追加」から「HTML」を追加する
「＋セクションを追加」をクリックし、「HTML」セクションを追加します。
手順3) プルダウンで「HTML入力」を選択し、CSSを追記する
追加したHTMLセクションのプルダウンで「HTML入力」を選択し、
初期値の内容を削除後、入力欄に以下を追記して保存します。
追記例）
<style type="text/css">
img{object-fit: contain!important;}
</style>注意：上記の追記で画面内全ての画像が必ず元の画像の比率で表示されます。項目ごとの変更はできませんのでご注意ください。
手順4) プレビューで表示を確認する
編集画面の簡易プレビューにはHTMLセクションの内容が反映されないため、画面右上の「プレビュー」をクリックし、実際の表示をご確認ください。
※スマホの表示はデベロッパーツールにて可能です。
Google Chromeでは、画面上で右クリックして「検証」をクリックするか、キーボードの「F12」キーをクリックすることで、デベロッパーツールを開くことができます。ツールバー左上にある「デバイスツールバーの切り替え」アイコン（スマホとタブレットの形のアイコン）をクリックすると、スマホ表示への切り替えをかんたんにご確認いただけます。
■makeshopサポート記事
【Google Chrome／Firefox】でPCからスマホの表示をかんたんに確認する方法！
利用できるページ
HTMLセクションは、トップページ・商品詳細・商品カテゴリなど、本文にあたる箇所であれば追加できます。ヘッダーおよびフッターには設置できません。
※HTML入力欄には最大20,000文字まで入力できます。
ご利用にあたっての注意事項
※記述したCSSの内容によっては、HTMLセクションの範囲外にも影響がおよび、意図しない表示崩れやボタンが押せないなどの不具合が発生する場合があります。追記後は該当ページ全体の表示をあわせてご確認ください。
※CSSの記述内容や表示結果について、makeshopでの個別の調整対応はいたしかねます。あらかじめご了承ください。
※画像の比率調整のみを目的とした簡易的な対処法です。デザインを本格的にカスタマイズしたい場合は、クリエイターモードのご利用をご検討ください。
関連記事
■リリース情報
【ノーコードデザイン】「HTMLセクション」「LEEEP連携セクション（Instagramフィード）」追加のお知らせ