初心者です。現在、Craftのテンプレートを使用しており、トップページに画像を配置しているのですが、スマホのみPCと違う縦長サイズで表示させたいと考えています。カスタムコードで解決できるでしょうか？
ご回答をお待ちしております。
Topic summary
初心者がCraftのテンプレートでトップページに配置した画像について、スマホでのみ表示サイズが異なる問題に直面しています。
提案された解決策：
- メディアクエリ（
@media）を使用したCSSコードが提示されました - スマホ用（max-width: 768px）に異なる画像を表示する方法
content: url()で画像を切り替え、width: 100%とheight: autoでサイズを調整
現状：
質問者は初心者のため、「画像のクラス」の意味やCSSの変更方法が理解できず、さらなる説明を求めています。
議論は継続中で、より詳しい実装手順の説明が必要な状態です。
1 Like
ご質問拝見しました。
画像のクラスに以下cssを適用させることで可能かと存じます！
/* スマホ用に異なる画像を表示する */
@media only screen and (max-width: 768px) {
.responsive-image {
content: url('path/to/mobile-image.jpg'); /* スマホ用の画像 */
width: 100%; /* スマホ用に再度サイズを調整 */
height: auto;
}
}
こちら適宜調整していただければと思いますのでご参考にしていただけますと幸いです。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
ご回答ありがとうございます！
すみません、初心者なので、画像のクラスというのがどこの事かが分からず…
CSSを変更するという意味でしょうか？