كيفية ضبط أقصى ارتفاع للصورة على صفحة ويب

لتجنب تحميل صور بحجم كبير قد تؤثر على تنسيق الصفحة، يمكنك استخدام خاصية max-height في CSS لضبط الارتفاع الأقصى للصورة. يتم ذلك عن طريق إضافة الكود التالي:

img {

  max-height: 500px;

}

    

يمكنك ضبط الارتفاع بما يتناسب مع التصميم العام والحد من المساحات الفارغة غير المرغوب فيها.

تحديد مساحة صغيرة لارتفاع العناصر من المتصفح

في حال رغبت في تخصيص جزء من الصفحة فقط لأي عنصر، يمكنك تعيين max-height كحد أقصى ليشغل العنصر مساحة صغيرة، مما يساعد في الحفاظ على التنسيق المتناسق.

كيفية توسيط العناصر باستخدام max-height و margin: 0 auto

لتوسيط عنصر داخل صفحة أو حاوية، يمكنك استخدام خاصية margin: 0 auto مع تعيين max-height بحيث يكون أقل من عرض الحاوية. الكود التالي يوضح ذلك:

.container {

  width: 80%;

  max-height: 300px;

  margin: 0 auto;

}

    

ما هو الارتفاع الرأسي للشاشة وكيفية ضبط الارتفاع الكامل للشاشة

يشير الارتفاع الرأسي إلى المسافة الرأسية المتاحة في الشاشة. يمكنك تعيين الارتفاع الكامل باستخدام 100vh حيث vh هي وحدة تعتمد على نسبة الشاشة:

.full-screen {

  height: 100vh;

}

    

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