質問: 【owl-carousel】レスポンシブスライダーの横幅をスマホに対応させる こんにちは。楽天goldにpcスマホ共用のトップページをつくっています。https://www.rakuten.ne.jp/gold/off-price/スライダー部分に、owl-carouselというjsでスライダーを設置しました。******************************************* hero brand kate spade ほんの少しの勇気で世界は変わる! 日常生活をカラフルに彩り、明るく華やかな愛らしさで、「ファッションの喜び」というエッセンスを貴女の毎日に... discover 以下略*******************************************スライダーの画像は横が1920pxです。pc表示では、ブラウザの横幅に応じて、可変します。一方、スマホで見たときに、横がはみ出します。画像のサイズを小さくしてみましたが、引き伸ばされて表示され、画質が悪くなるだけででした。また、cssのhero-sectionにmax-width="**px"で、最大幅を入れてみましたが効かないようです。スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか?web制作は、初心者です。宜しくお願い致します。
回答: ecマスターズの伊藤です。> スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか?画像が .hs-item に背景(background-image)として表示されているため、単純に画像を横幅ぴったりに表示させたいということであれば=============.hs-item{ background-size: contain;}=============と、追加していただければ、横幅ぴったりとなります。background-size: 200%;background-size: 200px;といったように、数値でご指定していただくこともできます。background-sizeについては、下記のサイトに詳しく記載されておりますのでよろしければご参考ください。https://developer.mozilla.org/ja/docs/web/css/background-size> pc表示では、ブラウザの横幅に応じて、可変します。こちらですが、ブラウザの幅によって可変はしてはおらず、横幅を縮めるとサイドが切れていく、といった状態となっています。もともとの作りが、スマホを想定ていないか、横が切れても問題ない画像を使用することを想定していると思われます。そのため、画像を可変としてしまいますと、縦に余白ができてしまいます。横幅が切れてもいい画像をご用意いただくか、pcとスマホで、画像を分けてご用意いただく必要があると思います。