علي رزوقي نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 اريد ضبط مكان هذه الصورة بالشكل الاتي و لكن لم أستطع بالاساليب التي اتخذتها PRO.L.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Kais Hasan نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 اسهل حل يمكنك القيام به هو قص الصورة بدلاً من التعامل معها بشكق كامل. يمكنك أيضاً القيام بالقص باستعمال ال css عن طريق وضع طول و عرض محددين و وضع خاصية ال overflow على انها hidden. أو يمكنك استعمال ال css لوضع نصفها خارج حدود الضفحة.عبر القيام يعمل offset سالبة. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 هل يمكنك مشاركة الطريقة التي استخدمتها ؟ ويفضل مشاركة ملفات المشروع بالكامل. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أسامة زيادة نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 كما هو واضح أنك قمت باعطاء الصور التنسيقات التالية .hero img { height: 450; margin-left: 45px; -o-object-fit: cover; object-fit: cover; -o-object-position: -20% 0; object-position: -20% 0; overflow: hidden; padding-top: 75px; width: 740px; } قم باعطاء قيمة أكبر للخاصية margin-left لتصبح margin-left: 245px; ونحن لا نعطي العنصر نفسه الخاصية overflow: hidden; بل العنصر الحاوي للعنصر <div class="col-7 hidden-img">. <img class="position-absolute" src="/b2c74f12bf535e4faa38.png" alt=""> </div> لذلك نقوم باعطاء العنصر الحاوي صنف جديد باسم hidden-img ونقوم باعطائه التنسيق hidden-img { overflow: hidden; } وقم بحذف تنسيق overflow: hidden; من خصائص الصورة ويجب حذف الصنف position-absolute . قم بالمحاولة واخبرنا بالنتيجة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي رزوقي نشر 1 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 1 يناير 2023 بتاريخ 2 ساعة قال أسامة زيادة: كما هو واضح أنك قمت باعطاء الصور التنسيقات التالية .hero img { height: 450; margin-left: 45px; -o-object-fit: cover; object-fit: cover; -o-object-position: -20% 0; object-position: -20% 0; overflow: hidden; padding-top: 75px; width: 740px; } قم باعطاء قيمة أكبر للخاصية margin-left لتصبح margin-left: 245px; ونحن لا نعطي العنصر نفسه الخاصية overflow: hidden; بل العنصر الحاوي للعنصر <div class="col-7 hidden-img">. <img class="position-absolute" src="/b2c74f12bf535e4faa38.png" alt=""> </div> لذلك نقوم باعطاء العنصر الحاوي صنف جديد باسم hidden-img ونقوم باعطائه التنسيق hidden-img { overflow: hidden; } وقم بحذف تنسيق overflow: hidden; من خصائص الصورة ويجب حذف الصنف position-absolute . قم بالمحاولة واخبرنا بالنتيجة جربت كل ما قلته لكن المشكلة مازالت قائمة فالصورة تقوم بالتمديد عرض الصفحة كالاتي لهذا اعتقد أن المشكلة ليست في تنسيقات الصورة بحد ذاتها فقد جربت معظم الحلول المتوفرة في غوغل و كانت نفس النتيجة PRO.L.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أسامة زيادة نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 بتاريخ 6 دقائق مضت قال علي رزوقي: جربت كل ما قلته لكن المشكلة مازالت قائمة فالصورة تقوم بالتمديد عرض الصفحة كالاتي لهذا اعتقد أن المشكلة ليست في تنسيقات الصورة بحد ذاتها فقد جربت معظم الحلول المتوفرة في غوغل و كانت نفس النتيجة PRO.L.zip 25.87 MB · 4 تنزيلات لم أجد تغير في الملف !؟ أولاً هذه الشيفرة نحتاج لتعديلها <div class="col-7"> <img class="position-absolute" src="assets/images/PNGPIX-COM-Chevrolet-Camaro-Black-Car-PNG-Image.png" alt=""> </div> لتصبح كتالي <div class="col-7 hidden-img">. <img src="assets/images/PNGPIX-COM-Chevrolet-Camaro-Black-Car-PNG-Image.png" alt=""> </div> والتنسيقات سوف تصبح بهذا الشكل .hero{ height: 500px; width: 100%; .row{ margin-right: 0px; margin-left: 0px; } img{ width: 740px; height: 450; padding-top: 75px; margin-left: 245px; object-fit: cover; object-position: -20% 0; } } .hidden-img { overflow: hidden; } وقبل تشغيل المشروع قم بحذف مجلد build وبعدها قم باعادة تشغيل المشروع من خلال الأمر npm run build قم بالمحاولة وأخبرنا بالنتيجة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي رزوقي نشر 1 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 1 يناير 2023 بتاريخ 28 دقائق مضت قال أسامة زيادة: لم أجد تغير في الملف !؟ أولاً هذه الشيفرة نحتاج لتعديلها <div class="col-7"> <img class="position-absolute" src="assets/images/PNGPIX-COM-Chevrolet-Camaro-Black-Car-PNG-Image.png" alt=""> </div> لتصبح كتالي <div class="col-7 hidden-img">. <img src="assets/images/PNGPIX-COM-Chevrolet-Camaro-Black-Car-PNG-Image.png" alt=""> </div> والتنسيقات سوف تصبح بهذا الشكل .hero{ height: 500px; width: 100%; .row{ margin-right: 0px; margin-left: 0px; } img{ width: 740px; height: 450; padding-top: 75px; margin-left: 245px; object-fit: cover; object-position: -20% 0; } } .hidden-img { overflow: hidden; } وقبل تشغيل المشروع قم بحذف مجلد build وبعدها قم باعادة تشغيل المشروع من خلال الأمر npm run build قم بالمحاولة وأخبرنا بالنتيجة أعتذر فقد أرسلت الملف القديم عن طريق الخطأ PRO.L.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أسامة زيادة نشر 1 يناير 2023 أرسل تقرير مشاركة نشر 1 يناير 2023 بتاريخ 14 دقائق مضت قال علي رزوقي: أعتذر فقد أرسلت الملف القديم عن طريق الخطأ PRO.L.zip 25.87 MB · 4 تنزيلات هل مازالت المشكلة مستمرة ؟ لانه نزلت الملف وهو سليم والصورة تظهر مثل ما اخبرتك . 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 علي رزوقي نشر 1 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 1 يناير 2023 بتاريخ 1 ساعة قال أسامة زيادة: هل مازالت المشكلة مستمرة ؟ لانه نزلت الملف وهو سليم والصورة تظهر مثل ما اخبرتك . المشكلة قد حلت بعد اعادة تشغيل السيرفر شكرا لك اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
علي رزوقي
اريد ضبط مكان هذه الصورة بالشكل الاتي و لكن لم أستطع بالاساليب التي اتخذتها
PRO.L.zip
رابط هذا التعليق
شارك على الشبكات الإجتماعية
8 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.