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

فقاعة نوع بيثون

باستخدام خاصية موضع الكائن

ال موضع الكائن تحدد الخاصية في CSS محاذاة المحتوى داخل الحاوية. يتم استخدامه مع تناسب الكائن خاصية لتحديد كيفية عنصر مثل أو يتم وضعه بإحداثيات x/y في مربع محتواه.

عند استخدام تناسب الكائن الخاصية، القيمة الافتراضية لـ موضع الكائن يكون 50% 50% ، لذلك، يتم وضع كافة الصور افتراضيًا في وسط مربع المحتوى الخاص بها. يمكننا تغيير المحاذاة الافتراضية باستخدام موضع الكائن ملكية.

بناء الجملة

 object-position: | initial | inherit; 

ال موضع قيمة موضع الكائن تحدد الخاصية موضع الفيديو أو الصورة داخل الحاوية. يقبل قيمتين عدديتين، حيث تتحكم القيمة الأولى في المحور السيني، والقيمة الثانية تتحكم في المحور الصادي. يمكننا استخدام السلسلة مثل يسار يمين ، أو مركز وما إلى ذلك لوضع الصورة في الحاوية. يسمح بالقيم السلبية.

يمكننا أن نفهم ذلك بشكل أكثر وضوحا باستخدام بعض الأمثلة.

سلسلة إلى حرف جافا

مثال

في هذا المثال، نستخدم قيم السلسلة مثل 'أعلى اليمين'، 'أعلى الوسط'، و 'أعلى اليسار' لوضع الصورة.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

انتاج |

الآن، هناك مثال آخر لاستخدام موضع الكائن ملكية.

مثال

في هذا المثال نستخدم أولي القيمة التي وضعت الصورة في المركز. وذلك لأن الأولي يضبط الخاصية على قيمتها الافتراضية وهي 50% 50% . نحن نستخدم أيضًا القيم العددية 200 بكسل و 100 بكسل .

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

انتاج |

باستخدام الخاصية float

الخاصية float في CSS هي خاصية تموضع تستخدم لدفع عنصر إلى اليسار أو اليمين، مما يسمح للعناصر الأخرى بالالتفاف حوله. بشكل عام، يتم استخدامه مع الصور والتخطيطات.

قائمة مرتبطة بشكل مضاعف

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

لنأخذ مثالاً على استخدام يطفو ملكية.

مثال

 CSS float property #left { float: left; } #right { float: right; } 

انتاج |