كيف يمكن ضبط الصورة بحيث تلائم المحتوى باستخدام html css

عن نفسي، أحب ضبط أحد البعدين دون الآخر : العرض أو الارتفاع، فيكون الآخر تلقائيا لأنه سيحترم تلقائيا معيار الأبعاد المتزنة aspect ration وهو بشكل مبسط نسبة أحد البعدين من الآخر. فإن كان ارتفاع في الصورة الأصلية يساوي 1000 بكسل وعرصها 500 بكسل فإن نسبة الطول من العرض هي 1/2 ولذلك فإن ضبط الارتفاع كـ 500 بكسل سينتج عنه تلقائيا تخفيض العرض الى 250 بكسل لأن حاصل ضرب 500 في 1/2 هو 250. 

500 * 1/2 = 250

القيد الآخر الذي يمكنك فرضه هو بإستعمال الخاصية object-fit  اذ يمكن تعيين قيمة "contain" للحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة والحفاظ على جودتها، أو اسناد القيمة "cover" لتعبئة العنصر بالكامل ولكن بدون تحويل نسبة العرض إلى الارتفاع، وكلاهما يحفظ الصورة من التشتت.

استفد أكثر من الأجوبة على هاته الأسئلة:

https://academy.hsoub.com/questions/12284-تنسيق-حجم-الصور/

لعمل قيود على حجم الصور في موقع الويب، يمكن استخدام خاصية max-width على الصورة الرئيسية وتعيينها على الحد الأقصى للعرض المسموح به في عرض النافذة. يمكن أيضًا استخدام max-height لتقييد الارتفاع إذا كان ذلك مناسبًا.

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

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

هذا يمنع تكوين صور كبيرة جدًا والتي لا يمكن تناسبها في عناصر HTML الأخرى، وللمحافظة على دقة الصورة.

ثم يمكنك استخدام عناصر HTML مثل div ، وضع الصور داخلها، ثم ضبط أبعاد div وتخصيص عرض الصورة لتتناسب مع ذلك. على سبيل المثال:

<div style="width:500px; height:500px;">
   <img src="image.jpg" style="width:100%; height:100%; object-fit: fill;">
</div>

هذا يعني أن الصورة ستتمدد أو تتقلص لتتناسب مع أبعاد العنصر div ، و object-fit: fill يمكن ضبطه ليملأ العنصر div أو الاحتفاظ بالنسب الأصلية للصورة.
 

عند التعامل مع تخصيص الصور، يجب التأكد من أن الصورة تكون مناسبة لحجم العنصر الذي يُخصص لها. يجب تحسين الصور قبل رفعها، ويمكن استخدام أدوات تحرير الصور لتغيير حجم الصورة لتناسب حجم العنصر الذي سيتم عرض الصورة فيه.

علاوة على ذلك، يمكن استخدام تقنية "responsive web design" لجعل الموقع يتكيف تلقائيًا مع حجم الشاشة ويعرض الصور والمحتوى بشكل صحيح على كافة الأجهزة المختلفة. أحد الطرق الفعالة لتحقيق ذلك هو استخدام "Media Queries" لتخصيص النمط CSS الذي يعمل في نطاق محدد من أحجام الشاشة.

بالإضافة للإقتراحات السابقة يمكنك استخدم الوسائط المتجاوبة: يمكنك استخدام علامة <picture> والمصدر srcset لتوفير صور متعددة بأحجام مختلفة تتناسب مع أبعاد الشاشة. لنفترض أن لديك صورة بأبعاد مختلفة للشاشات الصغيرة والكبيرة:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="صورة توضيحية">
</picture>

هذه الطريقة يمكنك استخدامها مع الطرق السابقة للإستفادة من عرض الصور بشكل جيد كما يمكنك الأستفادة من خلال هذه الطريقة عن طريق توفير في الموارد لزيادة أداء الموقع ويمكنك قراءة المزيد من خلال البحث عن responsive image html

https://academy.hsoub.com/programming/html/الصور-المُتجاوبة-responsive-images-r652/

1- الطريقة الأولى هي استخدام background-image لعنصر الـCSS.

تتميز تلك الطريقة بسهولة استخدامها، حيث يمكن استخدام الصور كخلفية لعناصر HTML بدلاً من استخدام <img>. على سبيل المثال، يمكن إنشاء الشيفرة البرمجية التالية:

.myImg {
  background-image: url("my-image.png");
  background-size: cover;
}

2- الطريقة الثانية هي استخدام خاصية object-fit لعنصر <img>.

وتتيح لك تلك الخاصية تحديد نوع محدد من تكبير أو تصغير الصورة داخل إطار الصورة. يمكن إنشاء الشيفرة البرمجية التالية:

.myImg {
  object-fit: cover;
  width: 320px;
  height: 180px;
}

3- الطريقة الثالثة إنشاء عنصر صورة بكامل الشاشة داخل حاوية. بالشكل التالي:

.wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

4- الطريقة الرابعة هي الطريقة البسيطة حيث تعد هذه الطريقة هي الطريقة الأكثر استخدامًا،  من خلال ضبط عرض الصورة بسهولة باستخدام خاصية العرض، كالتالي:

img {
  height: auto;
  width: 100%;
  /* تحكم أكبر من خلال max-width */
  max-width: 720px;
}

5- الطريقة الخامسة هي الطريقة المتقدمة.

وتستخدم تلك الطريقة علامة <picture> والخاصية srcset، حيث يمكن تغيير مصدر الصورة بناءً على عرض الصفحة في المتصفحات الحديثة.

وتستطيع استخدامها لتحميل صور أصغر على الأجهزة المحمولة والهواتف الذكية لتحسين وقت التحميل والأداء.

تستخدم علامة <picture> لتعريف مجموعة من المصادر للصورة واستخدام خاصية srcset لتعريف نسخ مختلفة من الصور المناسبة لأحجام الشاشة المختلفة.

ويمكن أيضاً استخدام الخاصية media لتحديد شروط معينة لتحميل الصور، وباستطاعتك استخدام العنصر <img> داخل عنصر <picture> لتحديد الصورة الافتراضية.

الكود التالي يوضح استخدام عنصر <picture> مع الخاصية srcset:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg">
</picture>

في المثال، تم تحديد مصادر مختلفة للصورة باستخدام الخاصية srcset حسب عرض الشاشة. وعند تحميل الصفحة على الأجهزة التي يكون عرض الشاشة أقل من 800 بكسل، سيتم تحميل الصورة elva-480w.jpg ، بينما على الأجهزة التي يكون عرض الشاشة أكبر من 800 بكسل، سيتم تحميل الصورة elva-800w.jpg. وإذا لم تتوفر صور ملائمة للشاشة، سيتم استخدام الصورة الافتراضية الموجودة في العنصر <img>.