عندما نذهب إلى المقابلات ، غالبًا ما يتم طرح أسئلة حول التصميم. غالبًا ما ينزلون لسرد قيم خاصية العرض أو كيفية توسيط العناصر. هذا أزعجني بصراحة ، وأردت الخروج بمهامي الخاصة ، التي يمكنني من خلالها اختبار مهارات التصميم ، وليس كيف حفظ قيم الممتلكات.
وصف المهمة
غالبًا ، عندما أقرأ مقالات على الإنترنت ، أواجه المشكلة التالية: يبدأ النص في القفز عند تحميل الصورة.
أحد حلول هذه المشكلة هو إضافة عنصر نائب للصورة ، حيث تكرر نسبة العرض والارتفاع نسبة العرض إلى الارتفاع للصورة.
سأبدأ تنفيذه مع الترميز:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
لتعيين أبعاد عنصر نائب ، تحتاج إلى معرفة نسبة العرض إلى الارتفاع للصورة. على سبيل المثال ، سأستخدم حجم الصورة 1920 × 1080 بكسل.
ولكن إذا عرضت صورة بهذا الحجم ، فسيتم عرضها في معظم الشاشات بتمرير أفقي. لذلك ، سوف أقوم بتعيين عنصر .post على أقصى عرض يبلغ 640 بكسل ، وسيتم ضبط عرض الصورة عليه.
.post { max-width: 640px; } .post__img { max-width: 100%; }
سأضيف عنصرًا نائبًا إلى الصفحة باستخدام العنصر الزائف قبل. تحتاج أيضًا إلى تذكر وضع الصورة فوقه.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
أنت الآن بحاجة إلى عرض العنصر النائب لتكرار عرض الصورة. في وقت سابق ، جعلت الصورة تشغل 100 ٪ من عرض العنصر الأصلي. المنشور. سأفعل الشيء نفسه بالنسبة للعنصر الزائف من قبل بإضافة عرض: حظر عليه.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
الأصدقاء ، لقد انتهيت من هذا الجزء من العمل ، وبقيت لك. تحتاج إلى حساب ارتفاع العنصر الزائف قبل.
للقيام بذلك ، استخدم خاصية الحشو مع قيمة النسبة المئوية. للقيام بذلك بشكل صحيح ، تحتاج إلى معرفة خصوصية حساب الفائدة في خاصية الحشو. وتذكر أيضًا أن أحجام الصور 1920 × 1080 بكسل.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
آمل أن تحاول حل هذه المشكلة بنفسك. ولكن إذا ظهرت صعوبات ، يوجد حل لي أدناه.
الحل
خصائص الحشوة العلوية والسفلية لها ميزة واحدة مفيدة للغاية. إذا قمت بتعيين القيم بالنسب المئوية ، فسيتم حسابها من عرض الكتلة الأصل.
وفقًا لذلك ، ومعرفة ذلك وتذكر حجم الصورة (1920 × 1080 بكسل) ، يمكنك حساب الحشوة العلوية للعنصر النائب باستخدام النسبة:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
حيث شي و السادس هما عرض و ارتفاع الصورة.
يبقى لإضافة قيمة للحشو أعلى:
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }