[ゆう子]

【お使いの Snow Monkey のバージョン】15.18.0
【お使いの Snow Monkey Blocks のバージョン】13.7.3
【お使いの Snow Monkey Editor のバージョン】6.21
【お使いのブラウザ】chrome, Safari
【当該サイトのURL】https://atom-p.co.jp/2022/01/06/%e5%a3%b2%e5%9c%b0-%e6%9c%9b%e6%9d%a5-%e6%b5%b7%e3%81%ae%e8%a6%8b%e3%81%88%e3%82%8b%e5%88%a5%e8%8d%98%e7%94%a8%e5%9c%b0/

### 実現したいこと

お世話になります。スノーモンキーのテーマを使い不動産業のサイトを制作しております。

その中の物件紹介ページでスライダーブロックを使っています。

ここで縦向き、横向きが混在する画像をスライダーにするときに、画像のアスペクト比を4:3、16:9に設定すると画像がトリミングされてしまいます。縦向き画像の場合、大きくトリミングされてしまうためトリミングせずに表示させたいです。

↓このような感じで、縦向き画像は左右に余白がある状態で全体を表示させたいのですが、もし実現できるのならご教授いただけるでしょうか？

 

### 発生している問題　### 試したこと

画像アスペクト比をデフォルトにすると、横向き画像の上下に大きく余白ができてしまいます。↓

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

下記の CSS で実現できるかと思います。

.smb-spider-slider .smb-spider-slider__figure-wrapper .spider__figure {
  object-fit: contain;
}

ただ、すべてのスライダーブロックに反映されてしまうので、適当な CSS クラスをブロックに追加して、そのクラスに適用されるようにセレクタを調整してください。

♥ 1

いいねをした人:

[ゆう子]

キタジマ様

 

早速ありがとうございます！

ばっちりできました！助かりました。

♥ 1

いいねをした人:

[投稿者]

投稿