امنح الصورة سمتي width وheight دقيقتين في HTML، ثم استخدم CSS لجعل عرضها المعروض متجاوبًا وارتفاعها تلقائيًا. توفر الأبعاد نسبة أبعاد مبكرة من دون تقييد الصورة بحجم العرض هذا. MDN: الصور متعددة الوسائط

هذا الدليل مخصص لمن يحرر صفحة HTML على جهاز Mac ويريد أن يتغير حجم صورة مع الحاوية التي تضمها، مع حجز مساحة متناسبة قبل تحميلها. يستخدم المثال رسمًا تجريديًا مستقلًا، لذا يمكنك تجربة سلوك تغيير الحجم من دون تنزيل ملف صورة.

كيف تحجز الأبعاد مساحة من دون تثبيت حجم العرض؟

للصورة أبعاد للمورد، مثل 1200 × 800، وحجم معروض تحدده الصفحة. وقد يختلف الرقمان. توفر سمات الأبعاد في HTML تلميحات لتحديد الحجم؛ ويمكن لورقة الأنماط تجاوز العرض والارتفاع المعروضين. كما يعيّن معيار HTML للسمات نسبة أبعاد مفضلة بصيغة auto 1200 / 800. معيار HTML: السمات الخاصة بالمحتوى المضمّن والصور

تبلغ نسبة الأبعاد لمورد حجمه 1200 × 800 مقدار 3:2. بعد أن يحدد التخطيط العرض المعروض، يمكن للمتصفح حساب ارتفاع متناسب قبل اكتمال تحميل المورد. توصي MDN بتحديد البُعدين مع CSS المتجاوب للحد من تحركات التخطيط المرتبطة بالصور. MDN: الصور متعددة الوسائط

تقسيم المسؤوليات العملي بسيط: يصف HTML أبعاد المورد، وتصف CSS كيفية ملاءمته للصفحة. احرص على اتساق الوصفين. يفيد تحديد الأبعاد حتى إن لم تظهر الصورة بحجمها الأصلي مطلقًا.

اختر ما إذا كان ينبغي للصورة ملء الحاوية

استخدم مقطع CSS التالي عندما ينبغي للصورة ملء عرض الحاوية المتاح. يفترض المقطع أن فئة الصورة هي responsive-image وأن سمات الأبعاد دقيقة:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

إذا كان ينبغي تقليص الصورة عند الضرورة مع الاحتفاظ بعرضها المحدد عندما تتوفر مساحة أكبر، فاستخدم هذا المقطع البديل:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

النمط الثاني هو النهج الذي توثقه MDN لإبقاء الصورة ضمن حاوية أضيق. في هذا التخطيط البسيط، تملأ width: 100% الحاوية، بينما تحدد max-width: 100% حدًا أقصى للعرض. أبقِ height: auto في كلا النمطين كي يتبع الارتفاع نسبة الأبعاد بدلًا من بقائه عند قيمة الارتفاع المحددة في HTML. MDN: الصور متعددة الوسائط

جرّب صفحة كاملة لصورة متجاوبة على جهاز Mac

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

يتضمن المستند CSS ورسم SVG مشفرًا يحتوي على تكوين أصلي من دائرة ومستطيل. لا توجد ملفات أو حزم إضافية لتثبيتها. يحدد المورد وعنصر الصورة أبعادًا مقدارها 1200 × 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

افتح الملف المحفوظ في متصفحك وضيّق النافذة. ينبغي أن يتقلص التكوين تناسبيًا، وأن يبقى Marker B تحته. يؤدي توسيع النافذة إلى تكبير التكوين إلى أن يبلغ عرض الحاوية في المثال حدًا أقصى قدره 900 بكسل. هذا الحد الأقصى خيار توضيحي لتصميم الصفحة؛ وليس شرطًا لتقنية حجز المساحة.

يُحمّل المورد المضمّن فورًا، لذا يوضح هذا المثال تغيير الحجم المتجاوب بدلًا من تنزيل يتأخر ظهوره بوضوح. وقد تم تحليل SVG المشفر والتحقق من أبعاده باستخدام Python؛ كما نُفذت الحسابات أدناه. لم يُنفذ عرض الصفحة في متصفح أثناء الإعداد.

لتكييف الصفحة مع مورد آخر، استبدل قيمة src وحدّث بُعدي HTML ليتطابقا مع أبعاد ذلك المورد. استخدم أعدادًا صحيحة بلا وحدات، مثل 1200، بدلًا من 1200px في هذه السمات. تحدد MDN هذا التنسيق لأبعاد الصور. MDN: عنصر تضمين الصورة

ما مقدار المساحة التي ينبغي للمتصفح حجزها؟

في هذا التخطيط البسيط، حيث لا يوجد حد أو هامش داخلي للصورة، احسب الارتفاع المتوقع كما يلي:

الارتفاع المعروض = العرض المعروض × ارتفاع المورد ÷ عرض المورد

تعطي أبعاد المثال، 1200 × 800، النتائج التوضيحية التالية. تشير قيم العرض إلى صندوق محتوى الصورة، لا إلى نافذة المتصفح بأكملها.

عرض الصورة المعروض الارتفاع المتناسب
300 بكسل CSS 200 بكسل CSS
600 بكسل CSS 400 بكسل CSS
900 بكسل CSS 600 بكسل CSS

يفيد هذا الحساب أيضًا في التشخيص. لنفترض أن المورد الفعلي حجمه 1200 × 800، لكن HTML يحدد خطأً أبعادًا مقدارها 1200 × 600. عند عرض الصورة بعرض 600 بكسل، توحي النسبة المحددة بارتفاع قدره 300 بكسل؛ بينما تتطلب النسبة الفعلية 400 بكسل. وقد يؤدي ذلك إلى تصحيح محتمل مقداره 100 بكسل عندما تصبح النسبة الطبيعية متاحة.

ينتج هذا التصحيح عن جزء auto من تلميح نسبة الأبعاد: تستخدم الصورة ذات نسبة الأبعاد الطبيعية تلك النسبة بمجرد توفرها. لذلك تهم دقة السمات حتى عندما تكون ورقة الأنماط صحيحة. تحدد مواصفات CSS هذا الفرق بين النسبة المقدمة والنسبة الطبيعية للعنصر المستبدل. CSS Box Sizing Module Level 4: نسب الأبعاد المفضلة

متى ينبغي استخدام aspect-ratio في CSS بدلًا من ذلك؟

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

المقطع التالي بديل CSS للمثال الكامل. استبدل قاعدة .responsive-image الحالية به:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

هنا، تطلب aspect-ratio: 1 / 1 صندوقًا مربعًا. يظل العرض متجاوبًا، ويُحسب الارتفاع التلقائي بناءً عليه. تحتاج نسبة الأبعاد المفضلة إلى بُعد تلقائي واحد على الأقل كي تؤثر في تحديد الحجم؛ أما تحديد كلا البُعدين صراحةً فيلغي هذا الدور. MDN: aspect-ratio

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

ولنسبة مؤقتة ينبغي أن تفسح المجال للنسبة الطبيعية للمورد، تدعم CSS أيضًا قيمة مثل aspect-ratio: auto 3 / 2. وقد يؤدي ذلك إلى تغيير أبعاد الصندوق بعد التحميل إذا اختلف المورد. أما النسبة التي لا تتضمن auto فتعبر بدلًا من ذلك عن الشكل المفضل للتخطيط. CSS Box Sizing Module Level 4: نسب الأبعاد المفضلة

ما الذي ينبغي التحقق منه إذا ظلت الصورة تتحرك أو تتمدد؟

تحقق من المورد والتخطيط بهذا الترتيب:

  1. تحقق من بُعدي HTML كليهما. ينبغي أن يصفا المورد بدقة. فاقتران عرض صحيح بارتفاع غير صحيح يظل يعطي نسبة أبعاد خاطئة.
  2. تحقق من ارتفاع CSS المطبق. ينبغي أن يكون auto في المثال المتناسب. فقد تكون هناك قاعدة أخرى مطابقة تحدد ارتفاعًا ثابتًا.
  3. تحقق من العرض المعروض. يعتمد حساب المساحة المحجوزة على العرض الذي يحدده التخطيط. ويؤدي تغيير حجم المتصفح عمدًا إلى تغيير ذلك العرض وارتفاعه المتناسب.
  4. تحقق من قواعد نسبة الأبعاد الصريحة. تعبّر نسبة CSS مربعة ونسبة طبيعية 3:2 عن غرضين مختلفين لتحديد الحجم.
  5. تحقق من ملاءمة الصورة على نحو مستقل. تتحكم contain وcover في كيفية ملاءمة المورد داخل صندوقه؛ ولا تحددان أبعاد الصندوق المفقودة.

تتبع هذه الفحوص الفرق بين صندوق العنصر ونسبته المفضلة والمورد المعروض داخله. يشرح دليل MDN لنسبة الأبعاد تأثير الأبعاد الصريحة في تحديد الحجم المتناسب، بينما يوثق مرجعها الخاص بـobject-fit الملاءمة والقص. MDN: فهم نسب الأبعاد وضبطها، MDN: object-fit

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

في مهمة عرض صورة متناسبة اعتيادية، ابدأ بأبعاد HTML دقيقة وCSS متجاوبة. واستخدم نسبة صريحة في CSS عندما تحتاج الصفحة إلى شكل معين للصندوق. تتيح لك هذه الخيارات مجتمعة حجز المساحة المطلوبة مع السماح لحجم العرض باتباع تخطيط الصفحة.

المصادر