CSS: How to view the current source of the picture?

sunmingtao / sample-code

3 stars 4 forks source link

CSS: How to view the current source of the picture? #126

Closed sunmingtao closed 4 years ago

sunmingtao commented 4 years ago

Suppose the html is

<picture class="footer__logo">
    <source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5em)">
    <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">
</picture>

How do we know which picture is loaded by the browser?

sunmingtao commented 4 years ago

Open Google chrome. F12 to open dev tools Click the icon to toggle device

Click the 3 vertical dots at the top right corner and select 'Add device pixel ratio'

Finally inspect the element property