swiperを導入したけど画像のレスポンシブがうまくいかないよ
はじめに
(bootstrapを使用しています。)
画像のレスポンシブがうまくいかないって人に向けて。
swiperを使うときswiper-containerにheightを設定しますが、画面サイズが小さくなってもheightが固定なので変な余白が生じてしまいます。
またいい感じに調節しても画面幅を小さくすると、画像の両端が見切れるといった別の問題が発生します。
解決方法
class:"img-fluid" を画像クラスに設定する。
hoge.html.erb
<div class="swiper-slide"><%= image_tag 'test1.jpg', class:"img-fluid" %></div>
application.scss
.swiper-container {
width: 100%;
}
画像の端が見切れることなく幅とともに小さくなってくれます。
ぜひ試してみてください。
Author And Source
この問題について(swiperを導入したけど画像のレスポンシブがうまくいかないよ), 我々は、より多くの情報をここで見つけました https://qiita.com/rised/items/d48e670e8c6322723866著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .