شرح صفوف ومحتوى الفقرة
تقبل سمتا width وheight في HTML أعدادًا صحيحة غير سالبة بلا وحدة، وتحدد أبعاد الصورة بوحدات CSS pixel. أما كتابة px أو % فتكون في خصائص CSS كما يلي:
- النسبة المئوية [percentage]: تُكتب علامة النسبة المئوية [%] بعد القيمة، مثل style="width:50%;height:auto". سيؤدي ذلك إلى تعيين عرض الصورة ليكون نصف عرض العنصر الحاوي لها، بغض النظر عن الجهاز المستخدم، سواء كان جهاز كمبيوتر مكتبي أو محمول أو جهاز لوحي أو هاتف ذكي.
- البكسل [pixel]: تكتب الوحدة px بعد قيمة خاصية CSS. على سبيل المثال يمكن كتابة style="width:100px" لضبط العرض على 100 بيكسل. البكسل هي وحدة قياس افتراضية تُستخدم لتحديد حجم العناصر على الشاشات.
Setting Image Width and Height
ضبط عرض الصورة width وارتفاعها height بوضع الأرقام فقط، حيث سيعتبر المتصفح هذه القيم بوحدة البكسل [pixel].
HTML
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="400" height="200">Set Image Width and Height by Percent
ضبط عرض width وارتفاع height الصورة بالنسبة المئوية يجعلها تتناسب مع حجم العنصر الحاوي، باستخدام CSS وأرقام متبوعة بعلامة %. في المثال ارتفاع الحاوية محدد بـ300px حتى يكون height:100% قابلًا للحساب.
HTML
<div style="width:100%;height:300px">
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" style="width:100%;height:100%">
</div>Set Image Width and Height by Pixel
ضبط عرض width وارتفاع height الصورة باستخدام خصائص CSS في style، مع كتابة px بعد الرقم. لا نكتب px داخل سمتي HTML width وheight.
HTML
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" style="width:200px;height:200px">