HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Responsive picture</title>

  <style>

    img { max-width: 100%; height: auto; border-radius: 8px; }

  </style>

</head>

<body>

  <h1>Responsive image</h1>

  <p>Resize the preview — a different placeholder loads on narrow vs wide screens.</p>

  <picture>

    <source srcset="https://placehold.co/320x200/f97316/white?text=Mobile"

      media="(max-width: 600px)">

    <source srcset="https://placehold.co/640x360/2563eb/white?text=Desktop"

      media="(min-width: 601px)">

    <img src="https://placehold.co/400x260/64748b/white?text=Default"

      alt="Responsive landscape photo">

  </picture>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Images — Responsive picture