فرض تغيير حجم الصورة مع الحفاظ على نسبة العرض إلى الارتفاع

عند العمل مع الصور، غالبًا ما يكون من الضروري تغيير حجم الصور إلى أبعاد محددة. ومع ذلك، فإن الحفاظ على نسبة العرض إلى الارتفاع يضمن عدم ظهور الصور مشوهة أو ممتدة.

المحاولة الأولية:

في البداية، تم استخدام الأبعاد المحددة وقواعد CSS المخصصة لتغيير الحجم الصورة، ولكن لم يتم الحفاظ على نسبة العرض إلى الارتفاع:

img { أقصى عرض: 500 بكسل؛

img {
  max-width: 500px;
}

الحل:

لفرض تغيير حجم الصورة مع الحفاظ على نسبة العرض إلى الارتفاع، يمكن استخدام خصائص CSS التالية:

display: block;: يضمن إمكانية تدفق الصورة داخل محتوى الصفحة.
• max-width:230px;: يضبط الحد الأقصى لعرض الصورة image.
• max-height:95px;: يضبط الحد الأقصى لارتفاع الصورة.
• width: auto;: يسمح للصورة بملء المساحة المتوفرة تلقائيًا ضمن الحد الأقصى للعرض والحد الأقصى -قيود الارتفاع.
• الارتفاع: تلقائي؛: يضبط الارتفاع تلقائيًا بناءً على الجانب المتأصل في الصورة النسبة.

النتيجة:

تطبيق قواعد CSS هذه على الصورة:

هذه الصورة في الأصل 400 × 400 بكسل، ولكن يجب تغيير حجمه بواسطة CSS:

img { عرض: كتلة؛ أقصى عرض: 230 بكسل؛ أقصى ارتفاع: 95 بكسل؛ العرض: تلقائي؛ الارتفاع: تلقائي؛

ينتج عنه صورة يتم تغيير حجمها ضمن الأبعاد القصوى المحددة مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية.