إدراج الصور في html وضبط أبعادها (الطول و العرض) وجعلها متناسبة مع الصفحة وحجم الخط

في لغة HTML يمكن عرض الصور من خلال العنصر img كالتالي:

<img src="https://via.placeholder.com/150" />

وستكون النتيحة كالتالي بالطبع:

ويمكن التحكم في طول وعرض الصورة من خلال إضافة الخاصية width أو height، على النحو التالي:

<img src="https://via.placeholder.com/150" width="300" height="200" />

وستظهر الصورة بحجم مختلف عن المرة السابقة:

بالنسبة للصور، عادة نضبط أحد الأبعاد ونترك البعد الآخر تلقائي لكي لا يتغير تناسب الصورة / نسبة الطول إلى العرض /

<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"   أي رابط ..
     
	style='width: 100%; height: auto;' />

	style='width: 250px; height: auto;' />

أو لانعطيه قيمة.

بشكل عام لكي تجعل الصور متجاوبة مع حجم الصفحة، يمكننا استخدام واحدة قياس rem وهذه تعتمد على حجم الخط.

حيث نعطي html حجم خط ما، ثم العنصر يأخد x rem حيت يتم حساب القيمة كنسبة وتكون متوافقة مع مختلف أحجام الشاشات

<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"  />

<style>
  
  html {
    font-size: 10px;
  }

  img {
      width: 10rem;
  }
</style>

تابع جزء واحدات القياس: