max/min height/width

شرح خاصية max-height/max-width

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

يمكن تعيين القيمة لـ max-height و max-width باستخدام وحدات القياس المختلفة مثل البكسل، النسبة المئوية، الإنش، والسنتيمتر، ويمكن استخدام القيم الثابتة أيضًا.

الامثلة:

• لتعيين حدٍ أقصى لعرض صورة إلى 500 بكسل، يمكن استخدام الشفرة التالية:

img {
  max-width: 500px;
}

• لتعيين حدٍ أقصى لارتفاع عنصر HTML إلى 70٪ من ارتفاع الشاشة، يمكن استخدام الشفرة التالية:

div {
  max-height: 70vh;
}

• لتعيين حدٍ أقصى لعرض وارتفاع عنصر HTML إلى 100 بكسل، يمكن استخدام الشفرة التالية:

div {
  max-height: 100px;
  max-width: 100px;
}

يمكن استخدام خاصية max-height و max-width بشكل مفيد لتحديد الحد الأقصى لحجم العناصر التي تتغير بشكل ديناميكي، مثل الصور والفيديو وعناصر HTML الأخرى التي يتم تعيين حجمها بشكل ديناميكي بناءً على حجم الشاشة.

شرح خاصية min-height/min-width

خاصية min-height و min-width في CSS تستخدم لتعيين حدٍ أدنى لارتفاع وعرض العناصر المختلفة في صفحة الويب. وتتيح هذه الخاصية للمصممين تحديد الحد الأدنى للأبعاد التي يمكن أن يصل إليها العنصر، وبالتالي تجنب تقلص العناصر عند تغيير حجم الشاشة.

يمكن تعيين القيمة لـ min-height و min-width باستخدام وحدات القياس المختلفة مثل البكسل، النسبة المئوية، الإنش، والسنتيمتر، ويمكن استخدام القيم الثابتة أيضًا.

الامثلة:

• لتعيين حدٍ أدنى لعرض صورة إلى 200 بكسل، يمكن استخدام الشفرة التالية:

img {
  min-width: 200px;
}

• لتعيين حدٍ أدنى لارتفاع عنصر HTML إلى 30٪ من ارتفاع الشاشة، يمكن استخدام الشفرة التالية:

div {
  min-height: 30vh;
}

• لتعيين حدٍ أدنى لعرض وارتفاع عنصر HTML إلى 50 بكسل، يمكن استخدام الشفرة التالية:

div {
  min-height: 50px;
  min-width: 50px;
}

يمكن استخدام خاصية min-height و min-width بشكل مفيد لتحديد الحد الأدنى لحجم العناصر التي تتغير بشكل ديناميكي، مثل الصور والفيديو وعناصر HTML الأخرى التي يتم تعيين حجمها بشكل ديناميكي بناءً على حجم الشاشة.