علامة <img>

يساعد ضبط السمتَين width وheight في علامات <img> على منع متغيّرات التصميم. وتتيح هذه المعلومات للمتصفح الاحتفاظ بالمقدار الصحيح من المساحة للصورة.

  • ضبط السمتَين width وheight: يجب ضبط قيمتَي هاتين السمتَين لمطابقة أبعاد الصورة نفسها (أي حجمها الأساسي)، بدلاً من الأبعاد التي سيتمّ عرض الصورة بها.

  • ضبط نمط الصورة حسب الحاجة: بناءً على النمط الحالي للصورة، قد تؤدي إضافة السمتَين width وheight إلى عرض الصورة بشكلٍ مختلف. في كثير من الحالات، يمكن حلّ هذه المشكلة عن طريق إضافة السمة height: auto أو width: auto إلى التصميم الحالي.

نمط CSS السابق تغيير إلى
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">