0

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

このパディングまたはマージンが原因ですか?

4

0 に答える 0