تغيير حجم الصورة إلى نسبة مئوية من نفسها حصريًا باستخدام CSS

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

هل من الممكن تغيير حجم الصورة باستخدام النسب المئوية لـ CSS؟في الوقت الحاضر ، لا توجد خاصية CSS مباشرة تسمح بتغيير حجم الصورة بناءً على حجمها. ومع ذلك، هناك طريقتان بارعتان يمكنهما تحقيق هذا التأثير:

تعمل هذه الطريقة على تقليل حجم الصورة بشكل مرئي دون التأثير على حجمها الأبعاد الفعلية. تستخدم التقنية خاصية "التحويل: مقياس ()" لتقليص الصورة بنسبة مئوية محددة. تظل الصورة متمركزة ضمن أبعادها الأصلية.

مثال: