tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit to ask Q about img srcset and sizes on slack

This commit is contained in:
Robert McGovern 2022-11-02 15:38:15 +00:00
parent 43d25f0bcb
commit 77d12b2e24
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html
View File

@ -36,8 +36,39 @@
<a href="">Get Started</a> <a href="">Get Started</a>
<picture> <picture>
<source media="(min-width: )" srcset="" sizes=""> <!-- <source media="(min-width: 1440px)"
<img src="assets/image-hero-mobile.png" alt=""> srcset="assets/image-hero-desktop@2x.webp 2x, assets/image-hero-desktop.webp" type="image/webp">
<source media="(min-width: 1440px)" srcset="assets/image-hero-desktop@2x.png 2x, assets/image-hero-desktop.png">
<source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.webp 2x, assets/image-hero-tablet.webp"
type="image/webp">
<source media="(min-width: 768px)" srcset="assets/image-hero-tablet@2x.png 2x, assets/image-hero-tablet.png">
<source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.webp 2x, assets/image-hero-mobile.webp"
type="image/webp">
<source media="(max-width: 767px)" srcset="assets/image-hero-mobile@2x.png 2x, assets/image-hero-mobile.png"> -->
<!-- // fallback in different sizes, as well as regular src. -->
<!-- mobile image 435x409, page 327x301
x2 870x818
tablet: 695x723, on page 640.71x640
x2 1390x1446
desktop: 1046x938, page 991.63x936.92
x2 2092x1876
-->
<!-- either widths, or pixel density -->
<img srcset="
assets/image-hero-mobile.png 435w,
assets/image-hero-tablet.png 695w,
assets/image-hero-desktop.png 1046w,
" sizes="
(max-width: 767px) 327px,
(max-width: 1439px) 640px,
870px,
" src="assets/image-hero-mobile.png"
alt="Woman blowing onto a mug. Top right of her is a box indicating 29k Members. On the bottom right is a box indicating 1,451 Course Hours."
class="">
</picture> </picture>
</section> </section>