في بعض الأحيان، يكون من الضروري ملاءمة الصورة في بُعد معين. يمكننا تغيير حجم الصورة عن طريق تحديد عرض الصورة وارتفاعها. الحل الشائع هو استخدام أقصى عرض: 100%؛ و الارتفاع: تلقائي؛ بحيث لا تتجاوز الصور الكبيرة عرض الحاوية الخاصة بها. ال أقصى عرض و اقصى ارتفاع تعمل خصائص CSS بشكل أفضل، لكنها غير مدعومة في العديد من المتصفحات.

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

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

مثال

في هذا المثال، نقوم بتغيير حجم الصورة باستخدام الأمر أقصى عرض: 100%؛ و الارتفاع: تلقائي؛ ملكيات.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

انتاج |

مثال

في هذا المثال نستخدم ملاءمة الكائن: الغطاء؛ ملكية.

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

انتاج |

في المثال أعلاه، استخدمنا غطاء قيمة تناسب الكائن ملكية. كما هو الحال في المثال أعلاه، يمكننا استخدام القيم الأخرى لل تناسب الكائن الخاصية من أجل تغيير حجم الصورة.