الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> img { width: 200px; height: 150px; display: block; border: 1px solid; object-fit: cover; } </style> </head> <body> <h2>CSS object-position property</h2> <p>object-position: 20px </p> <img style="object-position: 20px 20px" src="/tutorials/css/object-fit-and-position/logo.png"/> <p>object-position: 20px 50px</p> <img style="object-position: 20px 50px" src="/tutorials/css/object-fit-and-position/logo.png"/> <p>object-position: 30% top</p> <img style="object-position: 30% top" src="/tutorials/css/object-fit-and-position/logo.png"/> <p>object-position: center top</p> <img style="object-position: center top" src="/tutorials/css/object-fit-and-position/logo.png"/> <p>object-position: center center (Default)</p> <img style="object-position: center center" src="/tutorials/css/object-fit-and-position/logo.png"/> <p>object-position: center bottom</p> <img style="object-position: center bottom" src="/tutorials/css/object-fit-and-position/logo.png"/> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود