# SnowMonkey：どんなサイズの画像を入れても4:3または16:9で固定サイズ表示する方法（「項目」ブロックで画像表示時）

◆変更内容
・SnowMonkeyの「項目ブロック」＞「自由入力」使用

◆サンプル
※１枚目の写真だけ上下余白が入っていますが、本当は自動でトリミングされます。クライアントの要望でトリミングなしに全体図を入れて欲しいということだったので、4:3の画像を作ったものです


◆変更ファイル（子テーマ使用）
style.scss

style.scss

//「出展メーカー」写真トリミング(4:3）
.house-img .smb-panels__item__figure {
  position: relative;
  padding: 75% 0 0 0; /* 75% なら 4:3、56.25% なら 16:9 */
  overflow: hidden;
}

.house-img .smb-panels__item__figure > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%; /* 画像を上下中央揃えしてトリミング */
  height: 100%;
  width: 100%;
}

//キャプション幅

.smb-panels__item{
background-color: #55a5bf;
}

.smb-panels__item__body{
    padding:0.3rem 0;
    background-color: #55a5bf;
    color: #fff;
}

//キャプション フォントサイズ
.house-img .smb-panels__item__body .smb-panels__item__title{

    @include sm {
      font-size: 0.75em !important;
  }
}