- このトピックには8件の返信、2人の参加者があり、最後に
により2年、 5ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.17.0
【お使いの Snow Monkey Blocks のバージョン】13.5.0
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】chrome
【当該サイトのURL】https://gakuhayashi.online/kaigai-fx/### 実現したいこと
いつもお世話になっております。お忙しいところ大変恐縮ではございますが、自分が調べた所、不慣れな点もございまして希望とおりに上手く表示できないため相談させて頂きたく投稿させて頂きました。
実現したいこととしましては当該urlのトップページで非推奨のスライダーを入れてリンクを貼っているのですが（こちらは2カラムの上に1カラムでスライダーを入れておりましてキタジマ様が以前書かれていた方法（mysnowmonkeyにコードを追加する）で実装しました。
このスライダー画像が色々試してみてはいるのですが幅を全幅にして画像の高さ変更のやり方が分からなくご教示頂ければと思い質問させて頂きました。
お時間ない中申し訳ございませんが可能な限りで大丈夫ですので教えていただけると助かります。
### 発生している問題
全幅にならない、高さを画面の高さに合わせたいが自分のスキルでは実現できていない。
### 試したこと
mysnowmonkeyをプラグインとしてインストールしてcssフォルダにcssを記載してみましたが上手くいきませんでした。
申し訳ございませんが返信いただけると助かります。
いいねをした人: 居ません全幅は下記の CSS で実現できます。
div#front-page-top-content .smb-slider { width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }高さについてはどう表示させたいかで多少変わるかなと思います。具体的にどのような表示にされたいのですかね？
いいねをした人: 居ませんキタジマ様
早速のご返信誠にありがとうご会います。
高さについては現状上から
ヘッダーメニュー
↓
お知らせバー
↓
スライダー
となっていますが、スライダーの高さをPCの場合は画面の高さに合わせていっぱいに表示させたいと考えていますがどのようにすればよいか分からず迷っておりました。
もし可能でしたらご教示頂けますと幸いでございます。
お時間ある時に返信いただけますと助かります。
林
いいねをした人: 居ませんキタジマ様
何度も大変申し訳ございません
PC表示に関しては頂いております追加CSSで実現できました。
ただ、写真のサイズが高さがあるものに関しては画面からはみ出てしまうのですがこちらは写真のサイズを変更するしかないのでしょうか？
もしCSSで高さを変更できるのでしたらご教示頂けますと幸いでございます。
あと、モバイル表示時の写真の高さを変更するのはどのようにするのでしょうか？
いくつも大変申し訳ございません。
お時間がある時にでも返信いただけましたら幸いでございます。
林
いいねをした人: 居ませんただ、写真のサイズが高さがあるものに関しては画面からはみ出てしまうのですがこちらは写真のサイズを変更するしかないのでしょうか？
画角を維持したまま横幅を画面サイズに拡大すると当然高さは画面高よりはみ出てしまうものはでてくると思います。はみださないようにするには適当に上下をトリミングするしかないと思いますが、それは画像で調整するのは難しい（いろいろな画面の画角があるので）ので、やるとすれば CSS で画面高を超えた部分はトリミングする、ということになるかなと思います。それでよければちょっと CSS を書いてみます。
あと、モバイル表示時の写真の高さを変更するのはどのようにするのでしょうか？
これも CSS ですね。
いいねをした人: 居ませんキタジマ様
お忙しい中、ご相談に乗っていただき本当にありがとうございます。
可能でしたらcss頂けますと誠に幸いでございます。
今回初めてお客様のサイトをSnowMonkeyで開発しておりまして、何卒クライアント様の要望通りに仕上げたいと思っている次第ですが、いかんせん自分に知識が乏しく、急いではおりませんのでお時間ある時にご対応頂けますと助かります。
林
いいねをした人: 居ませんヘッダーの高さ分だけずれがでるのでちょっと調整は必要かもですが、基本的にはこんな感じで実現できます。
.smb-slider__item__figure img { height: 100vh; // 画面の高さにあわせる object-fit: cover; // 自動的にトリミングして空白がでないようにする }※
object-fitは IE 非対応です。いいねをした人: 居ませんキタジマ様
お忙しい中お手数おかけ致しました!
現在出先でございますので自宅に戻ったら早速試してみます!
完了しましたら報告させて頂きトピック閉じます!
感謝しかございません、ありがとうございます!
いいねをした人: 居ません
- トピック「2カラムの上に1カラムでスライダーを入れて画像の幅と高さを調整したい。」には新しい返信をつけることはできません。