Q&A
回答ありがとうございました。
###実現したいこと
Slickにて、ブラウザ幅を伸縮した際に画像の横幅を固定したままで、かつ前後のイメージを見せつつセンタリングにしたいです。
イメージで言うと、まさに**湾岸通ギャラリー（http://www.caso-gallery.jp/）**がそうです。
今現在の下記のコードでは、横幅の変化にあわせ画像も伸縮してしまい困っています。
max-widthやmin-widthを設定してはどうかと思い、slick-slideにて設定してみましたが、どうにもうまく行きませんでした。
よろしければ、お力添えをお願いします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=1214, user-scalable=yes" > <link rel="stylesheet" href="/css/slick.css" type="text/css"> <link rel="stylesheet" href="/css/slick-theme.css" type="text/css"> <link rel="stylesheet" href="/css/base.css" type="text/css"> <script type="text/javascript" src="/js/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script> $(function(){ $('.hoge_slide').slick({ infinite: true, dots: true, pauseOnHover:true, arrows:false, slidesToShow: 3, centerMode: true, centerPadding: '0px', }); }); </script> </head> <div id="contents"> <p class="tes">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <div class="hoge"> <div class="hoge_slide"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> <img src="img/top.jpg" alt="" style="width:1024px;"> </div> </div> </div> </body> </html>
###BaseCSS
div#contents{ width : 100%; background : #FFFFFF; margin : 0px auto; } div.hoge{ width : 100%; padding : 0px; margin : 0px auto 0px auto; border-bottom : solid 1px #d8d8d8; background : url(/img/bg.png) repeat-x; background-origin : content-box; } div.hoge_slide{ width : 100%; padding : 0px; margin : 0px auto 0px auto; } .slick-slide{ margin :0px 5px; } p.tes{ width : 1024px; margin : 0px auto; }
回答2件
0
自己解決
リファレンスを読み返していたら、一点気になるオプションを見落としていました……。
variableWidth
こちらのオプションをtrueにしたところ、無事できました。
投稿2017/02/06 05:11
総合スコア12
0
あんまりちゃんと読んでませんが以下のスタイルを試してみては？
css
1.hoge_slide > img { 2 display: block; 3 width: auto; 4 max-width: 100%; 5}
もしくは background-image に画像を設定し、
background-size: cover を指定しちゃうのもやるせない感じでいいとおもいます。
または、アスペクト比を固定したいというだけなら以下のような手法もありますよ。
がんばって！
http://qiita.com/ryounagaoka/items/a98f59347ed758743b8d
投稿2017/02/06 04:25
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。