العرض والارتفاع

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

في CSS، تُستخدم الخاصيتان width وheight لتعيين أبعاد منطقة محتوى العنصر. وتُعد هذه الخصائص أساسية للتحكم في حجم العناصر وتخطيطها على صفحات الويب الخاصة بك.

إليك الصياغة الأساسية لاستخدام الخاصيتين width وheight:

selector {
    width: value;
    height: value;
}

width: عرض منطقة محتوى العنصر.

height: ارتفاع منطقة محتوى العنصر.

value: قيمة العرض أو الارتفاع المطلوبة، والتي يمكن تحديدها بالبكسل (px) أو بوحدات em (em) أو بالنسب المئوية (%) أو بوحدات CSS أخرى صالحة. يمكنك أيضًا استخدام الكلمة المفتاحية auto للسماح للمتصفح بحساب العرض أو الارتفاع تلقائيًا استنادًا إلى المحتوى.

على سبيل المثال:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

في هذا المثال، تمتلك جميع عناصر <div> عرضًا قدره 300px وارتفاعًا قدره 200px، بينما تمتلك جميع عناصر <img> عرضًا يشغل 100% من عرض العنصر الأب لها وارتفاعًا يُحسب تلقائيًا للحفاظ على نسبة العرض إلى الارتفاع.

التحدي

سهل

لديك مستند HTML يحتوي على division (<div>) وصورة (<img>). مهمتك هي استخدام خاصيتي width وheight لتعيين أبعاد هذه العناصر. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف العنصر <div>. عيّن width إلى 400px وheight إلى 250px.
اكتب قاعدة CSS تستهدف العنصر <img>. عيّن width إلى 300px وheight إلى auto.

جرّب بنفسك

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>