كيف يمكنني التمسك بصورة في أسفل الشاشة المرئية ، وتركز؟

Question

لدي موقع ويب ، وأحتاج إلى أن يكون لديك صورة تركز في أسفل الصفحة المرئية. لذلك في أي حجم شاشة ، ستظل الصورة في الأسفل ، وتركز.

Answer 1

باستخدام CSS النقي ، يمكنك تحقيق ذلك في جميع المتصفحات الجديدة

.fix{
    position:fixed;
    bottom:0px;
    left:50%;
}
<img src="yourimagepath" class="fix"/>

وبالنسبة لـ IE6 يمكنك استخدام position:absolute; بدلا من الثابت. هذا يضع الصورة في أسفل الصفحة ، ولكن أثناء التمرير لأعلى ، سيتم تمرير الصورة مع الصفحة. للأسف position:fixed في غير مدعوم في IE6.

Answer 2

السؤال القديم ولكن هنا هو أفضل حل توصلت إليه. ضع الصورة في حاوية Div ، ويتم وضع Div في أسفل الشاشة وتتمحور الصورة داخلها. يتمتع DIV بعرض محدد بنسبة 100 ٪ حتى تتمكن الصورة من مركزها بشكل صحيح. ل margin:auto; للعمل ، يجب عرض الصورة كعنصر جدول مع display:table;

استخدام display:table; يعني أنه ليس عليك تعيين عرض ثابت للعنصر الذي تريد مركزه.

    <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>

Answer 3

يجب أن تضعه في Div وبعد ذلك ، تتخيل صورتك بعرض 500 بكسل:

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}