html.picture.Element | strassencoder.ch

Überschrift Beispiel

Tag picture

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<h3>Das picture-Element</h3>

<p>Verändere die Grösse des Browser-Fenster um die verschiedenen Bilder anzuzeigen.</p>

<picture>

<source media="(min-width:1024px)" srcset="Bilder/LogoWebseite1.png">

<source media="(min-width:768px)" srcset="Bilder/LogoWebseite.png">

<source media="(min-width:365px)" srcset="Bilder/LogoWebseiteSmallScreen1.png">

<img src="Bilder/LogoWebseite.png" alt="Logo">

</picture>

</body>

</html>

Überschrift BrowserAusgabe

Das picture-Element

Verändere die Grösse des Browser-Fenster um die verschiedenen Bilder anzuzeigen.