[i]

【お使いの Snow Monkey のバージョン】バージョン: 14.3.5
【お使いの Snow Monkey Blocks のバージョン】バージョン 12.0.0
【お使いの Snow Monkey Editor のバージョン】バージョン 6.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】https://ntorelabo.com/hak/?s=test

### 実現したいこと
以前フォームで「サイト内検索の検索フォームの画像で検索されたものをクリックした時別タブで表示したいのですが」という質問をしまして、無事別タブで表示できたのですが、

サイト内検索の検索フォームの画像で検索されたものをクリックした時別タブで表示したいのですがどうすればいいでしょうか？

このトピックには9件の返信、2人の参加者があり、最後に井田時矢により1ヶ月前に更新されました。 10件の投稿を…

snow-monkey.2inc.org

画像が画面幅からはみ出てしまい、うまく表示できればと思っております。
画像の縦横比はバラバラでなく縦長、横長２パターンのみになりますが、
画面幅に合わせてスクロールせず拡大表示できないでしょうか？

### 発生している問題
検索結果ページから画像を選ぶと
画像が画面幅からはみ出てしまう

お手数おかけ致しますが、よろしくお願い致します。

### 試したこと

♥ 0

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

[キタジマ タカシ]

念の為確認なのですが、この別タブで開く画像のページは、ダッシュボード → メディア → 適当な画像 → 添付ファイルのページを表示、で開くページと同じページでしょうか？

♥ 2

いいねをした人:

[i]

ご返信ありがとうございます。
はい同じ表示になります。

♥ 0

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

[キタジマ タカシ]

なるほどー。ちょっと気になったのですが、例えば

test4

Just another WordPress site

ntorelabo.com

と

Frame 8

Just another WordPress site

ntorelabo.com

だと body についているクラス名が微妙に違うんですよね。Snow Monkey 自体に修正を入れて良い具合に表示されるようにしようと考えたのですが、ついているクラス名が違うのでどのクラスを対象にその修正を入れればよいのかがわからなくて。この2つの画像で違う設定をされていたり、登録の仕方が違うなど何か異なる点などありますかね？

♥ 0

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

[i]

すみません、特に心当たりはありません。

♥ 0

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

[キタジマ タカシ]

なるほど、そうなのですね。とりあえず下記のような感じでどうでしょうか。

.attachment-template-default .l-contents {
  display: flex;
  justify-content: center;
  align-items: center;
}

@supports (object-fit: contain) {
  .attachment-template-default .l-contents img {
    max-height: 100vh;
    max-width: 100%;
    object-fit: contain;
  }
}

♥ 1

いいねをした人:

[i]

無事画面に収まるように表示されました。

ありがとうございました。大変助かりました。

♥ 1

いいねをした人:

[投稿者]

投稿