الصور المرنة

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 66 من 76.

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

كيفية جعل الصور مرنة:

1. استخدام خاصية max-width في CSS
يضمن تعيين max-width: 100% عدم تجاوز الصور لعرض الحاوية الخاصة بها.

img {
  max-width: 100%;
  height: auto; /* يحافظ على نسبة العرض إلى الارتفاع */
}

2. استخدام وحدات منفذ العرض (Viewport Units)
يمكنك تحديد حجم الصور باستخدام vw (viewport width) لجعلها تتناسب مع حجم الشاشة.

img {
  width: 50vw; /* تأخذ الصورة 50% من عرض منفذ العرض */
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على صورة. مهمتك هي جعل الصورة مستجيبة بحيث تتكيف مع أحجام الشاشات المختلفة.

اكتب قاعدة CSS تستهدف جميع العناصر التي تحمل الفئة img-max. قم بتعيين max-width الخاص بها إلى 100% و height الخاص بها إلى auto.
اكتب قاعدة CSS تستهدف جميع العناصر التي تحمل الفئة img-vw. قم بتعيين width الخاص بها إلى 50vw و height الخاص بها إلى auto.

ورقة مرجعية

تتكيف الصور المرنة تلقائياً لتناسب أحجام الشاشات المختلفة في تصميم الويب المتجاوب.

باستخدام max-width:

img {
  max-width: 100%;
  height: auto; /* يحافظ على نسبة العرض إلى الارتفاع */
}

باستخدام وحدات عرض الشاشة (viewport units):

img {
  width: 50vw; /* تأخذ الصورة 50% من عرض شاشة العرض */
}

جرّب بنفسك

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>