مشكلة في تنسيق التذييل footer ضمن صفحة ويب باستخدام CSS

يرجى تعديل السؤال وإرفاق التنسيق بشكل نصي وليس كصورة.

حاول تحديد الارتفاع الأقصى للتذييل footer باستخدام الخاصية max-height وتعيينها لقيمة تناسب الحجم الذي تريده، مع إضافة الخاصية overflow بالقيمة hidden لإخفاء القسم الزائد من الصورة كالتالي:

.footer {
  ...
  max-height: 500px;
  overflow: hidden;
}

  بتاريخ On 20‏/2‏/2022 at 23:53 قال محمد فهد خالد:

شكرًا لك كيف يمكن أيضًا تنسيق العرض للتذييل

.footer {
  background-image: url("../images/footer.png");

  background-size:80% ;

  max-height: 600px;

  overflow: hidden;
}

 

أظهر المزيد  

يمكنك أيضًا تعيين العرض الأقصى للتذييل بأن لا يتجاوز عرض الشاشة باستخدام التالي

.footer {
  ...
  max-width: 100vw;
}

شكرًا لك كيف يمكن أيضًا تنسيق العرض للتذييل

.footer {
  background-image: url("../images/footer.png");

  background-size:80% ;

  max-height: 600px;

  overflow: hidden;
}

  بتاريخ On 20‏/2‏/2022 at 23:58 قال Hassan Hedr:

يمكنك أيضًا تعيين العرض الأقصى للتذييل بأن لا يتجاوز عرض الشاشة باستخدام التالي

.footer {
  ...
  max-width: 100vw;
}

 

أظهر المزيد  

مزبطتش ال max-width 
مفيش طريقة اقدر اتحكم بحجم الصورة نفسها عشان اقدر اخليها زي الصورة الي في الموقع الي فوق؟
اصغرها شوي

  بتاريخ On 21‏/2‏/2022 at 00:06 قال محمد فهد خالد:

مزبطتش ال max-width 
مفيش طريقة اقدر اتحكم بحجم الصورة نفسها عشان اقدر اخليها زي الصورة الي في الموقع الي فوق؟
اصغرها شوي

أظهر المزيد  

حاول إذا تعيين عرض محدد للصورة بما يتناسب مع الشكل الذي تريده مثلا width: 110% كالتالي 

footer img {
  width: 110%
}

  بتاريخ On 21‏/2‏/2022 at 00:09 قال Hassan Hedr:

حاول إذا تعيين عرض محدد للصورة بما يتناسب مع الشكل الذي تريده مثلا width: 110% كالتالي 

footer img {
  width: 110%
}

 

أظهر المزيد  

للاسف مزبطش

  بتاريخ On 21‏/2‏/2022 at 00:21 قال محمد فهد خالد:

للاسف مزبطش

أظهر المزيد  

هل حاولت تغيير قيمة object-fit إلى cover أيضًا حتى يتم تغيير قياس الصورة كالتالي

footer img {
  ...
  object-fit: cover;
}

  بتاريخ On 21‏/2‏/2022 at 02:08 قال Hassan Hedr:

هل حاولت تغيير قيمة object-fit إلى cover أيضًا حتى يتم تغيير قياس الصورة كالتالي

footer img {
  ...
  object-fit: cover;
}

 

أظهر المزيد  

غيرت ال width من ال html وال max-width من الcss وصغر حجم الصورة 

لكن بدها ازاحة شوي على اليسار بس مبتتحركش ب padding ولا position وال footer imge مبتاثرش عندي مهما ضفت عليها او حتى حذفته الفوتر مبيتغيرش

  بتاريخ On 21‏/2‏/2022 at 14:34 قال محمد فهد خالد:

غيرت ال width من ال html وال max-width من الcss وصغر حجم الصورة 

لكن بدها ازاحة شوي على اليسار بس مبتتحركش ب padding ولا position وال footer imge مبتاثرش عندي مهما ضفت عليها او حتى حذفته الفوتر مبيتغيرش

أظهر المزيد  

يجب إرفاق قسم HTML و CSS المتعلق بالتذييل Footer حتى نتمكن من مساعدتك