flickity (js スライダー) でこのソリューションに取り組んでいます。
http://codepen.io/djnutron/pen/jWozOv
要素を調べると、なぜ画像を囲む div のサイズを変更しているのか疑問に思っています。画像は1900×850です。しかし、どういうわけか、ブラウザは周囲の div を 1903x848 にリサイズしていますか?
追加してみました
padding 0 , margin 0, border 0
などをすべての div に適用します。
CSS コードは次のとおりです。
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
div.gallery {
height: 100%
}
* {
box-sizing: border-box;
}
.innerG {
background-image: url('http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg');
height: 100%;
}
.gallery-cell {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-size: 24px;
background: #EEE;
margin-right: 10px;
}
HTMLコードは
<div class="gallery js-flickity" data-flickity-options='{"setGallerySize": false,"cellAlign": "center","imagesLoaded": true,"lazyLoad": 1, "freeScroll": false, "wrapAround": true,"autoPlay": 6000,"prevNextButtons": true,"contain" : true,"percentPosition": true,"pageDots": true,"selectedAttraction" : 0.1,"friction": 0.6,"rightToLeft": false,"draggable": true}'
>
<div class="gallery-cell">
<div class="innerG">
<img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />
asdasdasd
</div>
</div>
<div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>
そして、それは単にflickityを呼び出しているだけです - http://flickity.metafizzy.co/
この URL から - http://flickity.metafizzy.co/flickity.pkgd.js
このパディングまたはマージンが原因ですか?