- const base = `https://codepen-chriscoyier-bucket.imgix.net/baby.jpg`;
- const alt_text = `Baby Sleeping`;
- const large_params = `h=1100&w=2000&fit=crop&fp-x=0.55&fp-y=0.67`;
- const medium_params = `w=1200&fit=crop&crop=focalpoint&fp-x=0.55&fp-y=0.67&fp-z=1.4`;
- const small_params = `h=600&w=600&fit=crop&crop=focalpoint&fp-x=0.55&fp-y=0.64&fp-z=2.5`;
picture
source(srcset=`${base}?${large_params}`, media="(min-width: 1000px)")
source(srcset=`${base}?${medium_params}`, media="(min-width: 600px)")
img(src=`${base}?${small_params}`, alt=alt_text)
View Compiled
img {
max-width: 100%;
}
body {
margin: 3rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.