الحفاظ على نسبة العرض إلى الارتفاع بنسبة 100٪ للعرض أو الارتفاع في CSS

عند استخدام CSS، غالبًا ما نحتاج إلى ضبط عرض أو ارتفاع الصور إلى 100%. ومع ذلك، فإن القيام بذلك قد يؤدي إلى تشويه الصورة. يحدث هذا بسبب عدم الحفاظ على نسبة العرض إلى الارتفاع (العلاقة المتناسبة بين عرض الصورة وارتفاعها).

للحفاظ على نسبة العرض إلى الارتفاع أثناء استخدام العرض أو الارتفاع بنسبة 100%، نحتاج إلى تقييد حجم الصورة في طريقة محددة. إذا قمنا بتحديد بُعد واحد فقط (العرض أو الارتفاع) في الصورة، فسيتم الحفاظ على نسبة العرض إلى الارتفاع تلقائيًا.

ومع ذلك، إذا قمنا بتعيين كل من العرض والارتفاع على 100٪، فقد تصبح الصورة كبيرة جدًا بالنسبة لنا المساحة المقصودة. في هذه الحالة، يمكننا وضع الصورة داخل DIV بأقصى عرض أو ارتفاع يناسب احتياجاتنا. يمكننا بعد ذلك استخدام الخاصية overflow:hidden لاقتصاص أي جزء من الصورة يمتد إلى ما هو أبعد من الأبعاد المحددة.

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