diff --git a/README.md b/README.md index 292e8022..f7ef6642 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ As a nice bonus lazysizes supports setting the ``sizes`` attribute automatically responsive-image3.jpg 900w" class="lazyload" /> ``` +**How sizes is calculated**: The automatic sizes calculation takes the with of the image and the width of its parent element and uses the largeest number of those two calculated numbers. It's therefore important, that all images are contained in a wrapper that isn't much bigger than the image should shown. Otherwise a wrong (too big) sizes attribute will be calculated. + For JS off support simply use a ``span`` or ``div`` element as a wrapper for a ``noscript`` element: ```html @@ -56,9 +58,9 @@ In case a lazyload image was hidden and then shown via JS the method ``lazySizes ```js lazySizes.updateAllLazy(); -```` +``` -####``lazySizes.unveilLazy(DOMNode)``` +####``lazySizes.unveilLazy(DOMNode)`` In case a developer wants to show an image even if it is not inside the viewport the ``lazySizes.unveilLazy(DOMNode)`` can be called: @@ -66,7 +68,7 @@ In case a developer wants to show an image even if it is not inside the viewport lazySizes.unveilLazy(imgElem); ``` -####``lazySizes.updateAllSizes()``` +####``lazySizes.updateAllSizes()`` In case one or more image elements with the attribute ``data-sizes`` have changed in size ``lazySizes.updateAllSizes`` can be called (For example to implement element queries): diff --git a/index.html b/index.html index dc8c260c..f32ce888 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,32 @@ -moz-tab-size: 2; tab-size: 2; } + + .scroll-view { + overflow: auto; + overflow-x: auto; + overflow-y: hidden; + position: relative; + width: 100%; + padding: 2px 2px 10px; + } + .scroll-doc { + display: table; + position: relative; + text-align: left; + } + .scroll-item { + display: table-cell; + vertical-align: middle; + } + .scroll-item .thumbnail { + margin: 5px 10px; + width: 230px; + } + .scroll-item .thumbnail img { + width: 100%; + height: auto; + }