Web Platform Advocate at @CloudinaryLtd
Published
Edited
Mar 28, 2018
1 fork
8 stars
html`
<img
class="example"
srcset="${ images['tiny.png'] } 300w,
${ images['small.png'] } 600w,
${ images['medium.png'] } 900w,
${ images['large.png'] } 1200w,
${ images['huge.png'] } 1500w,
${ images['gargantuan.png'] } 1800w"
sizes="(min-width: 932px) 932px, 100vw"
src="${ images['fallback.png'] }"
alt="Now that’s what I call responsive™" />
`
srcset="tiny.jpg 400w, small.jpg 800w, medium.jpg 1200w, large.jpg 1600w" // 👈 psst, hey! you can edit this! and the green boxes below will update to reflect your changes.
sizes="(min-width: 800px) 800px, 100vw" // 👈 edit me! edit! me!
wat = promisedImg( html`
<img id="wat"
srcset="${ images['wat.png'] } 300w"
sizes="${ changingSizes }" />
` )
wat.naturalWidth // note! Safari has a bug (https://bugs.webkit.org/show_bug.cgi?id=150443)
wat.naturalWidth === parseInt( wat.getAttribute('sizes') ) // If you’re on Safari, please pretend that this returns `true`
html`<style>
img.responsive {
max-width: 100%;
}
</style>`
html`
<img class="responsive"
srcset="${ images['king_hippo.png'] } 64w"
sizes="100vw"
alt="Do you like my new trunks? They are size XXX Large! Ha, ha, ha!" />
`
html`
<img class="responsive"
srcset="${ images['king_hippo.png'] } 64w"
sizes="(min-width: 64px) 64px, 100vw" />
`
imgWithAWidthAttribute = promisedImg( html`
<img class="responsive"
width="64"
srcset="${ images['king_hippo.png'] } 64w"
sizes="100vw" />
` )
imgWithAWidthAttribute.naturalWidth // Here I must again note that Safari has a bug, and will report “64” rather than whatever `100vw` is in `px` for you right now. https://bugs.webkit.org/show_bug.cgi?id=150443
html`<div style="padding-bottom: 1em;"><div class="resizeable">
<img class="responsive"
srcset="${ images['training.png'] } 640w,
${ images['training_small.png'] } 480w,
${ images['training_tiny.png'] } 320w"
sizes="100vw"
width="640"
src="${ images['training_tiny.png'] }"
alt="Night. Doc rides a bike; Little Mac jogs behind. Manhattan and the Statue of Liberty are lit up in the distance."
/>
</div></div>`
html`
<style>
img.my-way-to-responsive {
width: 100%;
}
</style>
<img class="my-way-to-responsive"
srcset="${ images['training.png'] } 640w,
${ images['training_small.png'] } 480w,
${ images['training_tiny.png'] } 320w"
style="max-width: 640px;"
sizes="(max-width: 640px) 640px, 100vw"
src="${ images['training_tiny.png'] }"
alt="Night. Doc rides a bike; Little Mac jogs behind. Manhattan and the Statue of Liberty are lit up in the distance."
/>
`
// doesn't actually help much
// units = require('units-css@0.4.0/dist/units.min.js')
// also found this cool thing which I'm not using https://github.com/albell/parse-sizes
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.