استخدم picture للتبديل بين ملفات الصور المربعة والعريضة عند نقطة توقف في إطار العرض. خصّص أبعادًا لكل مصدر، ودع CSS يغيّر حجم الصورة المحددة تناسبيًا. يشرح هذا الدليل إنشاء مثال محلي واختباره على Mac.

كيف يبدّل picture بين نسب عرض إلى ارتفاع مختلفة؟

ضع عنصر source مع شرط media قبل عنصر img الاحتياطي داخل picture. يختار المتصفح أول مصدر مؤهل يطابق شرطه، ثم يختار صورة من srcset لذلك المصدر. يُسمّى هذا التوجيه الفني: توفير تركيبات مختلفة للتخطيطات المختلفة. يدعم معيار HTML هذا النهج صراحةً. معيار HTML: الصور

تعمل ثلاثة أجزاء معًا: يختار المصدر المورد، وتصف سمات الأبعاد نسب ذلك المورد، ويتحكم CSS في حجمه المعروض. يمكن أن توفّر width وheight للمصدر المحدد نسبة العرض إلى الارتفاع التي تستخدمها الصورة المحتواة. لا يرسم عنصر picture الصورة بنفسه؛ بل يفعل ذلك عنصر img. معيار HTML: المحتوى المضمّن

اختر الآلية وفقًا للنتيجة التي تحتاج إليها:

متطلبك الآلية المناسبة
تغيير التركيبة أو نسبة العرض إلى الارتفاع عند نقطة توقف picture مع source يستخدم media
توفير درجات دقة مختلفة للتركيبة نفسها srcset، مع sizes عند استخدام واصفات العرض
إبقاء ملف واحد مع اقتصاصه داخل إطار ثابت تحجيم CSS وobject-fit: cover

تعالج هذه الآليات قرارات مختلفة. يحدد التوجيه الفني التركيبة التي تظهر. ويسمح اختيار الدقة للمتصفح باختيار مرشح مناسب ضمن تركيبة واحدة. ويحدد ملاءمة CSS كيفية شغل المورد المحدد لإطاره. توثّق MDN هذه الاستخدامات لـpicture وعلاقته بـsrcset وخصائص الملاءمة. MDN: عنصر picture

أنشئ مثالًا محليًا كاملًا على Mac

يستخدم المثال موردي SVG أصليين يحتويان على دائرة برتقالية ومستطيل بزوايا مستديرة بلون أخضر مزرق. ترتّب النسخة المربعة الشكلين أحدهما فوق الآخر؛ أما النسخة العريضة فتضعهما جنبًا إلى جنب. توجد جميع الملفات في مجلد واحد، ولا حاجة إلى أصول خارجية أو JavaScript للتبديل.

مواصفات الموارد بسيطة: استخدم موردًا مربعًا بأبعاد 600 × 600 عندما يكون عرض إطار العرض أقل من 700px. وعند 700px فما فوق، استخدم موردًا عريضًا بأبعاد 1200 × 600. تملأ الصورة المعروضة مساحة المحتوى مع ترك 16px على كل جانب، وبعرض أقصى قدره 960px. هذه الأبعاد ونقطة التوقف اختيارات توضيحية للتصميم.

احفظ موردي الشكلين

أنشئ مجلدًا باسم picture-demo. استخدم محرر شيفرة نصيًا عاديًا لإنشاء الملفين التاليين داخله، مع الحفاظ على اسميهما وامتداديهما كما هما. يحتوي كل مقطع مسوّر على الملف كاملًا؛ انسخ المحتويات من دون علامات سياج Markdown.

احفظ هذا باسم shapes-square.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

احفظ هذا باسم shapes-wide.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

احفظ صفحة HTML

أنشئ index.html في المجلد نفسه. إذا كنت تستخدم TextEdit، فاختر File > New، ثم Format > Make Plain Text قبل لصق الشيفرة. احفظ الملف بامتداد .html واختر Use .html إذا ظهرت مطالبة بذلك. توثّق Apple سير العمل هذا لإنشاء ملفات HTML. Apple: العمل مع مستندات HTML في TextEdit على Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

افتح index.html في Safari. في إطار عرض واسع بما يكفي، ينبغي أن يظهر الشكلان جنبًا إلى جنب. وفي إطار عرض أضيق، ينبغي أن يظهر أحدهما فوق الآخر. أبقِ الملفات الثلاثة معًا: تُحل عناوين URL النسبية للموردين انطلاقًا من موقع ملف HTML.

يستخدم المصدر العريض srcset رغم احتوائه على عنوان URL واحد فقط. داخل picture، يتطلب source السمة srcset؛ ولا يُسمح باستخدام السمة src فيه. سمات الأبعاد أعداد صحيحة بلا وحدات، لذا استخدم width="1200" لا width="1200px". MDN: عنصر source

لماذا نحدّد الأبعاد للمصدر والصورة الاحتياطية معًا؟

تصف أبعاد الصورة الاحتياطية، 600 × 600، المورد المربع. وتصف أبعاد المصدر العريض، 1200 × 600، المورد العريض. يتيح توفير زوجي الأبعاد كليهما للمتصفح الداعم تحديد نسب الصورة المختارة قبل تنزيلها. أما استخدام أبعاد الصورة المربعة للمصدر العريض فيعطي نسبة أولية خاطئة. معيار HTML: سمات أبعاد source

بعد ذلك، يضبط CSS عرض الصورة ليلائم عرض المحتوى المتاح مع إبقاء الارتفاع تلقائيًا. يسمح هذا البُعد التلقائي لنسب الصورة بتحديد ارتفاعها. يوضح مسوّدة تحجيم CSS كيف تشارك نسبة العرض إلى الارتفاع المفضّلة في التحجيم التلقائي؛ أما تثبيت البُعدين صراحةً فيلغي هذه المرونة. وحدة تحجيم الصندوق في CSS، المستوى 4

يمكن التحقق من التخطيط في هذا المثال بحساب بسيط:

عرض الصورة = min(عرض إطار العرض - 32, 960)
ارتفاع الصورة المربعة = عرض الصورة
ارتفاع الصورة العريضة = عرض الصورة / 2
عرض إطار العرض بوحدات بكسل CSS المورد المحدد أبعاد الصورة المحسوبة
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

هذه توقعات محسوبة لـCSS المقدّم، بافتراض أن عرض شريط التمرير لا يقلل مساحة المحتوى المتاحة. جرى التحقق برمجيًا من صياغة SVG وأسماء الموارد والأبعاد المحددة والحسابات؛ ولم يُعرض المثال في متصفح أثناء الإعداد.

لاحظ التغير الكبير في الارتفاع بين 699px و700px. وينتج هذا مباشرةً من الانتقال من تركيبة مربعة إلى تركيبة عريضة. وهذا متوقع عند تغيير حجم إطار العرض. أما حدوث قفزة ثانية بعد التحميل، مع ثبات إطار العرض، فيستدعي التحقق من الأبعاد المحددة وأي CSS يطغى عليها.

اختبر نقطة التوقف بدقة في Safari

يتيح وضع التصميم المتجاوب في Safari تغيير حجم إطار عرض الصفحة بشكل مستقل عن نافذة سطح المكتب. في إعدادات Advanced في Safari، فعّل Show features for web developers. افتح المثال، ثم اختر Develop > Enter Responsive Design Mode، أو اضغط Control-Command-R. توثّق WebKit الإعداد والاختصار ومعاينة قابلة لتغيير الحجم. WebKit: وضع التصميم المتجاوب المبسّط

اختبر 699px و700px أولًا، ثم إطار عرض ضيق وآخر واسع بشكل مريح. تحقق من أن التركيبة تتغير عند الحد المقصود، وأن الشكل البرتقالي يبقى دائريًا، وأن الفقرة أسفل الصورة تتبع تغير ارتفاعها. أعد التحميل عند كل جانب من نقطة التوقف للتحقق من التخطيط الأولي إلى جانب تغييره عند تغيير الحجم.

للتحقق مباشرةً من الملف الذي اختاره Safari، شغّل مقطع التشخيص الاختياري هذا في وحدة تحكم Web Inspector أثناء عرض المثال:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

شغّل المقطع مرة أخرى بعد تجاوز نقطة التوقف. ينبغي أن ينتهي عنوان URL المحدد باسم الملف المربع أو العريض المناسب. تعرض الخاصية currentSrc عنوان URL الذي اختاره المتصفح؛ لكن قيمتها وحدها لا تثبت تحميل المورد بنجاح. MDN: الخاصية currentSrc في HTMLImageElement

ما الذي ينبغي التحقق منه إذا لم يعمل التبديل كما ينبغي؟

تحقق بالتتابع من الاختيار، وأبعاد المورد، وطريقة العرض. يحول ذلك دون الخلط بين مشكلة تحجيم CSS ومشكلة اختيار المورد.

  1. يبقى الملف المربع محددًا عند العروض الواسعة. تأكد من أن إطار العرض يصل إلى 700px، وأن source يسبق img، وأن المصدر يستخدم srcset. عند وجود مصادر متعددة، افحص ترتيبها: قد تكون الأولوية لمصدر سابق يطابق الشرط. معيار HTML: اختيار التوجيه الفني
  2. لا يظهر أحد الموارد. طابق أسماء الملفات في الترميز مع الملفات في المجلد، بما في ذلك الامتدادات. في هذا المثال، يجب أن يكون ملفا SVG بجانب index.html.
  3. يظهر المورد الصحيح بشكل خاطئ. افحص CSS المطبّق على عنصر img نفسه، وخصوصًا القواعد التي تحدد ارتفاعًا ثابتًا. أعد height: auto للتحجيم التناسبي.
  4. تقفز الصورة بعد التحميل. قارن زوج الأبعاد المحدد لكل مورد بنسبة المورد الفعلية. تحقق أيضًا مما إذا كانت سمة CSS صريحة aspect-ratio تطغى على النسب المقصودة.

إذا كان تصميمك الفعلي يتطلب إطارًا ثابتًا، فاختر سلوك الملاءمة بعناية. تحافظ object-fit: contain على المورد كاملًا وقد تترك مساحة فارغة؛ وتملأ cover الإطار وقد تقص المحتوى؛ أما fill فقد تمدده. طبّق خصائص الملاءمة على img. لا يحتاج المثال المقدّم إلى إطار ثابت لأن تخطيطه يتبع نسب المورد المحدد. MDN: object-fit

ما حدود دعم المتصفحات؟

يُعد دعم picture ودعم الأبعاد الخاصة بكل مصدر اعتبارين منفصلين. يدرج ملخص التوافق في معيار HTML picture ضمن محركات المتصفحات الحالية. وتشير MDN إلى أن الخاصية width للمصدر، التي تعكس سمة الأبعاد، متاحة عبر المتصفحات منذ ديسمبر 2022. لا ينبغي افتراض أن المتصفحات الأقدم تحتفظ بمساحة الأبعاد الخاصة بالمصدر على نحو صحيح. معيار HTML: عنصر picture، MDN: الخاصية width في HTMLSourceElement

عندما لا يطابق أي مصدر الشرط، أو لا يدعم المتصفح picture، توفّر الصورة الاحتياطية img الصورة. في هذا المثال، تكون هذه هي التركيبة المربعة. وقد لا يتمكن متصفح يبدّل الموارد لكنه لا يدعم أبعاد المصدر من تحديد النسب النهائية للصورة العريضة إلا بعد تحميلها. MDN: عنصر picture

إذا كان المتصفح المستهدف يدعم CSS aspect-ratio لكنه يحتاج إلى قاعدة تحجيم صريحة، فألحِق مقطع CSS التالي بورقة الأنماط الحالية. فهو يطابق نقطة توقف HTML ويوفر نسبًا مؤقتة، مع السماح للنسبة الطبيعية للصورة المحمّلة بأن تحل محلها:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

توثّق MDN هذا الجمع بين auto ونسبة العرض إلى الارتفاع، وتذكر أن CSS aspect-ratio متاح عبر المتصفحات منذ سبتمبر 2021. لذا يخضع المقطع بدوره لحدود دعم. أبقِ نقطة توقفه متزامنة مع شرط المصدر، واختبر إصدارات المتصفحات التي تحتاج فعلًا إلى دعمها. MDN: aspect-ratio

بعد أن يعمل المثال على نحو صحيح، استبدل الملفات التجريبية بتركيباتك الخاصة وحدّث أبعادها معًا. حافظ على اتساق شرط المصدر ونسب الموارد وتحجيم CSS، ثم كرر الفحوص مباشرةً أسفل نقطة التوقف وفوقها.

المصادر