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

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

علي رزوقي

السؤال

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...