The avatar for @eeeps
Eric Portis
Web Platform Advocate at @CloudinaryLtd
Published
Edited
Mar 28, 2018
1 fork
8 stars
Insert cell
Insert cell
Insert cell
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™" />

`
Insert cell
Insert cell
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.
Insert cell
Insert cell
Insert cell
Insert cell
sizes="(min-width: 800px) 800px, 100vw" // 👈 edit me! edit! me!
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wat = promisedImg( html`

<img id="wat"
srcset="${ images['wat.png'] } 300w"
sizes="${ changingSizes }" />

` )
Insert cell
Insert cell
wat.naturalWidth // note! Safari has a bug (https://bugs.webkit.org/show_bug.cgi?id=150443)
Insert cell
wat.naturalWidth === parseInt( wat.getAttribute('sizes') ) // If you’re on Safari, please pretend that this returns `true`
Insert cell
Insert cell
html`<style>

img.responsive {
max-width: 100%;
}

</style>`
Insert cell
Insert cell
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!" />

`
Insert cell
Insert cell
html`

<img class="responsive"
srcset="${ images['king_hippo.png'] } 64w"
sizes="(min-width: 64px) 64px, 100vw" />

`
Insert cell
Insert cell
imgWithAWidthAttribute = promisedImg( html`

<img class="responsive"
width="64"
srcset="${ images['king_hippo.png'] } 64w"
sizes="100vw" />

` )
Insert cell
Insert cell
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
Insert cell
Insert cell
Insert cell
Insert cell
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>`
Insert cell
Insert cell
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."
/>

`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// 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
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more