مصطفى اوريك نشر 11 سبتمبر 2021 أرسل تقرير نشر 11 سبتمبر 2021 السلام عليكم. رغم تكبير صفحة HTML , الصورة الموجودة فيها لا يتغير حجمها, كيف وقع هذا ؟ الخاصية الوحيدة التي أعطيتها للصورة كان height: 60vh, لكن لا أرى أي دور لهذه الخاصية فيما حدث. أكواد الصفحة المقصودة تجدونها هنا : https://github.com/Mostafa-100/Landing-Page الصفحة للمعاينة : https://vibrant-lamarr-1c63e6.netlify.app/ 1 اقتباس
0 محمد أبو عواد نشر 11 سبتمبر 2021 أرسل تقرير نشر 11 سبتمبر 2021 الخاصية height: 60vh, تحدد ارتفاع الصورة, وانت استخدمت الوحدة vh التي تمثل ارتفاع الشاشة, وحددت قيمة 60 أي سوف تأخذ 60 بالمئة من ارتفاع الشاشة, وهي تعمل بالفعل, ولو حاولت ازالة الخاصية سوف يظهر التصميم بشكل سيء جدا, حاول ذلك اقتباس
0 مصطفى اوريك نشر 11 سبتمبر 2021 الكاتب أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 18:59 قال محمد أبو عواد: حاول ذلك أظهر المزيد إذن الخاصية هي السبب وراء هذا بتاريخ On 11/9/2021 at 18:59 قال محمد أبو عواد: وانت استخدمت الوحدة vh التي تمثل ارتفاع الشاشة, وحددت قيمة 60 أي سوف تأخذ 60 بالمئة من ارتفاع الشاشة أظهر المزيد فهمت, لكن ليس كاملا, عندما قمت بتكبير الشاشة وصلت لدرجة ظهور scroll في الصفحة فأليس من المفترض ان إرتفاع الشاشة كبُر عندها -أثناء ظهور sroll-, بالتالي الصورة سيتغير حجمها ؟ 1 اقتباس
0 محمد أبو عواد نشر 11 سبتمبر 2021 أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 19:30 قال مصطفى اوريك: إذن الخاصية هي السبب وراء هذا فهمت, لكن ليس كاملا, عندما قمت بتكبير الشاشة وصلت لدرجة ظهور scroll في الصفحة فأليس من المفترض ان إرتفاع الشاشة كبُر عندها -أثناء ظهور sroll-, بالتالي الصورة سيتغير حجمها ؟ أظهر المزيد من الطبيعي عند اعطاء قيمة أكبر من 60 سوف يكبر ارتفاع الصورة وبالتالي اذا كان ارتفاعها أكبر من الشاشة سوف يظهر السكرول لأن ارتفاع الصورة أصبح أكبر من الشاشة, لن يتغير حجم الصورة بناء على الشاشة كما تعتقد اقتباس
0 مصطفى اوريك نشر 11 سبتمبر 2021 الكاتب أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 19:36 قال محمد أبو عواد: من الطبيعي عند اعطاء قيمة أكبر من 60 سوف يكبر ارتفاع الصورة وبالتالي اذا كان ارتفاعها أكبر من الشاشة سوف يظهر السكرول لأن ارتفاع الصورة أصبح أكبر من الشاشة, لن يتغير حجم الصورة بناء على الشاشة كما تعتقد أظهر المزيد لا أظنك فهمت ما أقصده, بتعبير آخر, قصدت أنني عندما إستمررت في تكبير الصفحة التي بها تلك الصورة -لم أكبر الصورة و إنما الصفحة- ظهر السكرول في هذه الصفحة -كون النصوص كبُرت مع تكبيري للصفحة-, فسؤالي أليس إرتفاع الصفحة قد زاد -أثناء ظهور سكرول-, بالتالي سيزيد عندها إرتفاع الصورة لأن قيمة vh تزداد مع إزدياد إرتفاع الصفحة ؟ أرجو أنك فهمت ما قصدت. اقتباس
0 محمد أبو عواد نشر 11 سبتمبر 2021 أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 19:45 قال مصطفى اوريك: لا أظنك فهمت ما أقصده, بتعبير آخر, قصدت أنني عندما إستمررت في تكبير الصفحة التي بها تلك الصورة -لم أكبر الصورة و إنما الصفحة- ظهر السكرول في هذه الصفحة -كون النصوص كبُرت مع تكبيري للصفحة-, فسؤالي أليس إرتفاع الصفحة قد زاد -أثناء ظهور سكرول-, بالتالي سيزيد عندها إرتفاع الصورة لأن قيمة vh تزداد مع إزدياد إرتفاع الصفحة ؟ أرجو أنك فهمت ما قصدت. أظهر المزيد نعم لقد فهمتك المقصود بالصفحة ليس كامل الصفحة, بل هناك ما يسمى ب viewport , viewport عبارة عن مساحة العرض الظاهرة في الشاشة الآن, هل فمت ما أقصد؟ اقتباس
0 مصطفى اوريك نشر 11 سبتمبر 2021 الكاتب أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 19:58 قال محمد أبو عواد: نعم لقد فهمتك المقصود بالصفحة ليس كامل الصفحة, بل هناك ما يسمى ب viewport , viewport عبارة عن مساحة العرض الظاهرة في الشاشة الآن, هل فمت ما أقصد؟ أظهر المزيد نعم أظنني فهمت, إذن الإرتفاع يتغير بتغير الأجهزة ؟ اقتباس
0 محمد أبو عواد نشر 11 سبتمبر 2021 أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 20:05 قال مصطفى اوريك: نعم أظنني فهمت, إذن الإرتفاع يتغير بتغير الأجهزة ؟ أظهر المزيد نعم ممكن ذلك, بسبب اختلاف ارتفاع الشاشات 1 اقتباس
0 مصطفى اوريك نشر 11 سبتمبر 2021 الكاتب أرسل تقرير نشر 11 سبتمبر 2021 بتاريخ On 11/9/2021 at 20:06 قال محمد أبو عواد: نعم ممكن ذلك, بسبب اختلاف ارتفاع الشاشات أظهر المزيد شكرا جزيلا لك على هذه المعلومات اقتباس
السؤال
مصطفى اوريك
السلام عليكم.
رغم تكبير صفحة HTML , الصورة الموجودة فيها لا يتغير حجمها, كيف وقع هذا ؟ الخاصية الوحيدة التي أعطيتها للصورة كان height: 60vh, لكن لا أرى أي دور لهذه الخاصية فيما حدث.
أكواد الصفحة المقصودة تجدونها هنا : https://github.com/Mostafa-100/Landing-Page
الصفحة للمعاينة : https://vibrant-lamarr-1c63e6.netlify.app/
8 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.