كيفية ضبط مكان الصورة وإخفاء الجزء الخارج عن الحاوية .

اسهل حل يمكنك القيام به هو قص الصورة بدلاً من التعامل معها بشكق كامل.

يمكنك أيضاً القيام بالقص باستعمال ال css عن طريق وضع طول و عرض محددين و وضع خاصية ال overflow على انها hidden. 

أو يمكنك استعمال ال css لوضع نصفها خارج حدود الضفحة.عبر القيام يعمل offset سالبة.

هل يمكنك مشاركة الطريقة التي استخدمتها ؟

ويفضل مشاركة ملفات المشروع بالكامل.

كما هو واضح أنك قمت باعطاء الصور التنسيقات التالية 

.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 . 

قم بالمحاولة واخبرنا بالنتيجة 

بتاريخ 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

بتاريخ 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

قم بالمحاولة وأخبرنا بالنتيجة

بتاريخ 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

بتاريخ 14 دقائق مضت قال علي رزوقي:

أعتذر فقد أرسلت الملف القديم عن طريق الخطأ

PRO.L.zip 25.87 MB · 4 تنزيلات

هل مازالت المشكلة مستمرة ؟ لانه نزلت الملف وهو سليم والصورة تظهر مثل ما اخبرتك .

بتاريخ 1 ساعة قال أسامة زيادة:

هل مازالت المشكلة مستمرة ؟ لانه نزلت الملف وهو سليم والصورة تظهر مثل ما اخبرتك .

المشكلة قد حلت بعد اعادة تشغيل السيرفر شكرا لك