[hurley]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】v7.4.2
【お使いのブラウザ】Google Chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

Snow monkey Blocksにおいて、項目ブロック（画像有り）を複数横に並べた際、画像サイズがまちまち（例えば横長画像と縦長画像を横配列で並べたとき）だと、それぞれ下方向に伸びてしまって高さが揃わないのですが、高さを一定にするにはどうすればよいでしょうか。追加CSSで高さ固定ができますでしょうか。
項目ブロックの画像の縦横比など決まったものがあればご教示ください。
（ちなみに文章を入れた場合も高さが揃わないのですが、それは仕方ないので文字数でコントロールしております）
===

♥ 0

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

[キタジマ タカシ]

「それぞれ下方向に伸びてしまって高さが揃わない」というのがちょっとピンときていないのですが、画像自体が引き伸ばされている、ということでしょうか？ 可能なら URL を書き込んでもらえると直接 CSS など確認しやすいです。

♥ 0

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

[キタジマ タカシ]

あ、画像じゃなくて、項目自体の長さが伸びる、ということですかね。そういうことでしたら、例えば下記の CSS を追加すれば画像の高さを 4:3 で固定してトリミングすることができます。

.smb-items__item__figure {
  position: relative;
  padding: 75% 0 0 0; /* 75% なら 4:3、56.25% なら 16:9 */
  overflow: hidden;
}

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

♥ 0

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

[hurley]

（URL）管理者により削除

ですです！ばっちり高さが揃いました。
いつも素人な質問に答えてくださり、ほんと助かっています。
今後ともよろしくお願いいたします。

♥ 0

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

[hurley]

上記、変なURLを貼り付けてしまったようで申し訳ございません。
うまくいきましたのでクローズで結構です。
よろしくお願いいたします。

♥ 0

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

[キタジマ タカシ]

解決できたとのことで良かったです！クローズします。

♥ 0

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

[投稿者]

投稿