Skip to content

Instantly share code, notes, and snippets.

@ysm-dev
Created August 28, 2019 06:25
Show Gist options
  • Save ysm-dev/04f0640910db7822dc4a6def5ac9e80c to your computer and use it in GitHub Desktop.
Save ysm-dev/04f0640910db7822dc4a6def5ac9e80c to your computer and use it in GitHub Desktop.
Markdium-🚫 μ•ˆν‹° νŒ¨ν„΄μœΌλ‘œμ„œμ˜ CSS background-image 속성
<picture>
<source
srcset="
/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
/some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
/some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
/some/_320x240_crop_center-center/man-with-a-dog.webp 320w
"
sizes="100vw"
type="image/webp"
/>
<source
srcset="
/some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,
/some/_970x545_crop_center-center/man-with-a-dog.jpg 970w,
/some/_750x562_crop_center-center/man-with-a-dog.jpg 750w,
/some/_320x240_crop_center-center/man-with-a-dog.jpg 320w
"
sizes="100vw"
/>
<img
src="/some/man-with-a-dog-placeholder.jpg"
alt="Man with a dog"
style="object-fit: cover;"
loading="lazy"
/>
</picture>
<!-- The final way -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment