الصور المتجاوبة وتحجيم الوسائط

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexible local image</title>
<style>
img { display: block; max-inline-size: 100%; block-size: auto; }
</style>
</head>
<body>
<main><h1>Flexible image</h1><img width="200" height="100" alt="Sample diagram: a blue panel" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27%3E%3Crect width=%27200%27 height=%27100%27 fill=%27%23164e9a%27/%3E%3C/svg%3E"></main>
</body>
</html>

A blue two-to-one image fits within its container.

للصورة المدمجة نسبة معلومة وتتقلص دون تشويه ولا تحتاج طلبا خارجيا. النتيجة المتوقعة: صورة زرقاء بنسبة اثنين لواحد تلائم الحاوية.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Picture structure</title>
<style>
img { max-inline-size: 100%; block-size: auto; border: 1px solid; }
</style>
</head>
<body>
<main><h1>Picture fallback</h1><picture><source media="(min-width: 40rem)" srcset="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27/%3E"><img width="200" height="100" alt="Empty sample image for source-selection inspection" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27100%27/%3E"></picture></main>
</body>
</html>

A bordered local image slot with a valid picture fallback.

يوضح شرط source البنية وتبقى img البديل ومالكة النص. الموردان متماثلان ولا يدعي المثال توفيرا. النتيجة المتوقعة: موضع صورة محلية بحد وبديل picture صحيح.