- このトピックには7件の返信、2人の参加者があり、最後に
により2年前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 16.4.6
【お使いの Snow Monkey Blocks のバージョン】バージョン 15.0.1
【お使いの Snow Monkey Editor のバージョン】バージョン 7.0.1
【お使いのブラウザ】Chrome（Android Pixel5a）+ Safari（iPhone13Pro）
【当該サイトのURL】https://www.kigoulab.co.jp/### 実現したいこと
セクション（背景画像・動画）で、スマホ専用画像を表示させたい
### 発生している問題
スマホ用画像（698×698）画像を設定してみたが、画像が大きく表示されてしまい、はみ出ている
ちなみにPC用サイズは1920×1080
### 試したこと
PCとは比率サイズ、大きさを変えて登録してみたが、ダメ
画像サイズを色々変えて見たけどだめ
解像度を考えると、これ以上画像サイズを小さくしたくない基本的な設定方法がわかってないと思ってます
よろしくご教授下さいいいねをした人: 居ませんどの部分についてのことか書かれていなかったので一番上部のセクションの背景画像かなと思ったのですがあっていますか？
一応そこをみてみたら、PC 用にもスマホ用にも同じ画像（画像ID 2560）が設定されているようです。
試しにスマホ用の画像のアップローダーで真っ黒な画像とかぜんぜん違う画像を設定してみたらどうなりますか？
いいねをした人: 居ませんあ、一番肝心な情報をあげるの忘れてました！
2番目のキーボードにKigoulabのロゴが乗ってる画像です！
そっか、コードに両方書かれてるですね
後ほど確認してみます。実は後から車ぶつけられて、これからの病院です。
いいねをした人: 居ません病院行ってきました。明日大きな病院いきます😭
関係ない話はこれくらいにして、コードを見た感じだと、ちゃんと両方が記述されてるようです。これがメディアクエリーと、srcset で切り替わるってことですよね。
もしかして、ちゃんと画像は表示されていて、実は拡大表示されてるとかありますかね。そもそもSnow Monkeyの問題じゃなくって、わたしの最新のHTML/CSS理解不足？
<div class="smb-section-with-bgimage__bgimage smb-section-with-bgimage__bgimage--lg"><img loading="lazy" width="1024" height="576" src="https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1024x576.jpg" alt="ホームページのお医者さん" class="wp-image-2256" style="opacity:1;object-position:50% 50%" srcset="https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1024x576.jpg 1024w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-300x169.jpg 300w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-768x432.jpg 768w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1536x864.jpg 1536w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"></div> <div class="smb-section-with-bgimage__bgimage smb-section-with-bgimage__bgimage--sm"><img loading="lazy" width="698" height="698" src="https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp.jpg" alt="" class="wp-image-3236" style="opacity:1" srcset="https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp.jpg 698w, https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp-300x300.jpg 300w, https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp-150x150.jpg 150w" sizes="(max-width: 698px) 100vw, 698px"></div>いいねをした人: 居ませんセクション（背景画像/動画）ブロックは背景画像を
object-fit: cover;で表示します。つまり画像ではなくコンテンツにフィットする形でブロックは表示され、その範囲に表示される分だけ画像が表示されます。なのである程度の範囲はトリミングされます。.smb-section-with-bgimage__bgimage img { object-fit: contain; }にすれば一切トリミングされませんが、ブロックの上部と下部が画像で埋められなくなるので空白が出るはずです。
いいねをした人:
あ、なるほど！ ばたばたしててCSSまで確認できてませんでした。
ボックス要素にobject-fitがかかってるのですね。object-fitの値かえるか、画像のコピー部分を小さくあつかうか
両戦略で攻めてみます。まずはcontainでどうみえるかですかね
だめなら、もとにもどして画像編集かなありがとうございます！
もう少しやってみてからクローズしますねいいねをした人: 居ません
- このトピックに返信するにはログインが必要です。