Q&A
何のために（どんな理由で）整数にするのかを質問文に追記してください。
スライダーのメイン画像の高さが小数点になってしまう
##困っている事
整数でないと、画像が綺麗に見えない
http://kenwheeler.github.io/slick/
↓ slick jsのサイトのサンプルが既に小数点になっています。
※ 画像ではないですが、、
どこをいじれば、高さが整数になるのでしょうか。
以下、ソースです。
HTML
1<html> 2 <head> 3 <title>My Now Amazing Webpage</title> 4 <link rel="stylesheet" type="text/css" href="slick/slick.css"/> 5 <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> 6 </head> 7 <body> 8 9 <div class="your-class"> 10 <div>your content</div> 11 <div>your content</div> 12 <div>your content</div> 13 </div> 14 15 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 16 <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 17 <script type="text/javascript" src="slick/slick.min.js"></script> 18 19 <script type="text/javascript"> 20 $(document).ready(function(){ 21 $('.your-class').slick({ 22 setting-name: setting-value 23 }); 24 }); 25 </script> 26 27 </body> 28</html>
js
1 $('.slider-for').slick({ 2 slidesToShow: 1, 3 slidesToScroll: 1, 4 arrows: false, 5 fade: true, 6 asNavFor: '.slider-nav' 7}); 8$('.slider-nav').slick({ 9 slidesToShow: 3, 10 slidesToScroll: 1, 11 asNavFor: '.slider-for', 12 dots: true, 13 centerMode: true, 14 focusOnSelect: true 15});
ソースかURLぐらいは書きましょう。あと、％指定されていたら小数点になるのかも。
すみません、、追加しました。
「小数点がでずに整数であること」と「画像がきれいに見える」かは関係がないと思います。端数処理して画像がきれいに見えるとはとても思えません
回答3件
0
小数点が発生することには特に問題はありません。
slick.js などのスライダーは画像を画面内に表示するために横幅100%などのスタイルが付いています。画面幅によっては横幅自体も半端なピクセル数になるし、縦のピクセル数は縦横比によって決まるため小数点以下が出やすいといえば出やすいです。
例えば画面幅（デバイス幅）が360pxのときに、横456px縦123pxの画像を表示しようとした場合、横幅100%なら縦は97.1052...pxとかになります。これを整数値に無理やり直すために97pxにしたら、画像が歪む事になります。
さらに、現在の高解像度ディスプレイの場合、1CSSピクセルをそれ以上のドットで表現する状況になっているので、それを踏まえた画像の準備をされることをお勧めします。（これについては記事を参照してください）
【今さらだけど、Webデザイン制作における解像度のおはなし】
https://qiita.com/imusam/items/cd4f8da49c3ab73d6475#ディスプレイの解像度
【いまさら聞けないRetina対応のための「ピクセル」の話 | Rriver】
https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays
【「解像度」の理解があいまいだったので備忘録としてまとめてみた | 株式会社INDETAIL - インディテール】
https://www.indetail.co.jp/blog/171208/
【スマートフォンで画像がぼやけるのはなぜ？「デバイスの画像解像度」とスマホ表示について調べてみました。 | 独学でWebデザインまとめんばーず ｜Webクリオンライン】
https://web-creators-tips.com/matome/スマートフォンで画像がぼやけるのはなぜ？「デ/
投稿2018/07/11 14:09
総合スコア69407
ご回答ありがとうございます。ただ、今回のdemoは画像が使われておりません。また、ratina対応で、割り切れる倍数の画像を設置しても、高さが2px増えたり、さらに小数点がついてしまいます。slick.js で、その辺りを改善する策はないのでしょうか。
もう一度書きますが、小数点が発生することには特に問題はありません。
かしこまりました。小数点が出ることにより、画像が歪むので、綺麗な画像にならないかと思っていました。
小数点が出ても目視でわかるほど画像が歪むことはありませんよ。別の原因があるのでは？
0
ベストアンサー
~~やっつけ感ですが...~~~
例えば１のところを変えたかったらstyle="height:xxpx"で指定しては？
slick.jsが作ったH3ダグなんで、XPathとかで指定しないといけないから無し
<h3 style="height:190px">1</h3>
正しい指定方法が有るかもしれないので、settingsを見てみて下さい。
adaptiveHeightをtrueにすると画像に合わせた高さになるのかな。
…本家サイトのDocumentって見ないんですか？見て、試してダメなら質問しましょう。
投稿2018/07/11 12:03
編集2018/07/11 13:27総合スコア2826
ご回答ありがとうございます。見ました。。試しました、、。でも、ダメだったので、質問しました。「あ、それね」的な方に聞いた方が早いと思います。僕もかなり調べるタイプですが、結局、時間がかかった後、「あ、それね、こうするんよ」って言われた時、あー、時間無駄やったー、、ってなるんで、、
adaptiveHeight は、あまり関係しておりませんでした。
試したんですね。試した事は書いてくれるとコチラの考えも発散しなくて良いのではないでしょうか？(書いてないので調べてないのかと勘違いしてました。ごめんなさい。)
使った画像と歪んだ結果？をアップすると話早いと思います。もしかして小さき画像が拡大された時の画質が気になっている？
> 時間無駄やったー、、ってなるんで、、
ソレ、自分の事だけでなく回答者の事も考えてくださいね。回答者は複数人いますし、面識ない人に助けてもらうんですから。
そうですよね。。自分の事しか考えておりませんでした。失礼しました。
自分が試した事を事細かに漏れ無く書いている質問は回答が付きやすいし、解決もしやすい傾向が有ると思います。
回答する方もやりやすいですし、困っているんだ〜助けようって気になるもんです。
0
slick.js愛用者です。
slick.jsはレスポンシブ対応なので中身の要素に応じてslick-slideの高さが決まります。
質問者様はレスポンシブ対応を予定しておりましたでしょうか。
もしそうでないならばslick-slideの子要素に当たるimgにheightを入れて見てはいかがでしょうか。
投稿2018/07/12 22:32
編集2018/07/12 22:36
退会済みユーザー
総合スコア0
ご回答いただきありがとうございます。
レスポンシブを予定しております。
slickjsのサイトが既に縦がパーセント表示になっていたので、
気になっておりました。
ただ、元画像と同じ横サイズ、
ratinaの場合は、倍のサイズにすれば解決できそうです。
ただ、スマホの場合は、iPhone7以外は、小数点が出ても仕方ないかなと思いました。
あなたの回答
tips
プレビュー
