EmbedSocialのウィジェットでは、レイアウトに合わせて画像の一部が切り取られた上で表示されていますが、カスタムCSSの機能を活用することで画像の一部をカットすることなく、余白を埋める形でレイアウトを制御することが可能となります。
Instagram上での表示
下記の画像例では、Instagram上では長方形（縦長）の画像として投稿されています。
通常の仕様での表示
EmbedSocialのウィジェット上に画像が表示される際に、通常の設定では表示枠に合わせて画像の一部が切り取られて表示されます。
カスタムCSS適用時の表示
以下のようにカスタムCSSを追記することで、画像を元の比率のまま表示させることが可能となります。
各レイアウトごとのカスタムCSS
機能のアップデートなどによってレイアウトの仕様は一部変更となる可能性があり、ご紹介するカスタムCSSではうまく表示が制御できない場合もございます。予めご了承くださいませ。なおカスタムCSSの調整については基本サポートの対象外となりますので、各ユーザー様ご自身で設定・管理いただきますようお願いいたします。
フィードレイアウト
#es-feed .single-image { object-fit: contain; }
#es-feed .es-photo { background-color: #f8f8f8; }
Wallレイアウト
#es-feed-2 .single-image { object-fit: contain; }
#es-feed-2 .es-photo { background-color: #f8f8f8; }
Masonryレイアウト
#es-masonry .single-image { object-fit: contain; }
#es-masonry .es-photo { background-color: #f8f8f8; }
Gridレイアウト
#es-grid .es-photo .single-image { object-fit: contain; }
#es-grid .es-box { background-color: #f8f8f8; }
Sliderレイアウト
#es-carousel .single-image { object-fit: contain; }
#es-carousel .es-box { background-color: #f8f8f8; }
Carouselレイアウト
#es-carousel-2 .es-photo img { object-fit: contain; }
#es-carousel-2 .es-photo img { background-color: #f8f8f8; }
Collageレイアウト
#es-new .single-image { object-fit: contain; }
#es-new .es-box { background-color: #f8f8f8; }