اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

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

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

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

  • 0
نشر

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

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

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

  • 0
نشر
بتاريخ 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 . 

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

جربت كل ما قلته لكن المشكلة مازالت قائمة فالصورة تقوم بالتمديد عرض الصفحة كالاتي لهذا اعتقد أن المشكلة ليست في تنسيقات الصورة بحد ذاتها فقد جربت معظم الحلول المتوفرة في غوغل و كانت نفس النتيجة 

لقطة الشاشة 2023-01-01 154418.png

PRO.L.zip

  • 0
نشر
بتاريخ 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

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

  • 0
نشر
بتاريخ 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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...