html - 如何使页脚图像响应移动设备？

Question

在我的元素中，我有一个以图像为背景的页脚。

我在css里面设置的。你可以在下面看到它。它只在大屏幕设备上看起来不错，但在移动屏幕上看起来很丑。如何使图像响应？

我在前端方面经验不多，我想知道有哪些选择？

顺便说一下，我使用的是 bootstrap 4。

这里是jsfiddle的链接.

/*
 * START: Footer
 */
footer {
    background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 500px;
    bottom: 0;
    position: absolute;
}

footer .row {
    align-items: flex-end;
}

.flex-container {
    display: flex;
    flex-direction: column;
}

.flex-container > div {
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

.social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.social__button {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border-color: #fff;
    position: relative;
    cursor: pointer;
    margin: 5px;
    text-align: center;
}

.social__button i {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    height: 70px;
    line-height: 70px;
    width: 70px;
    font-size: 30px;
    z-index: 2;
    transition: 0.3s;
    color: black;
    border: 2px solid;
    border-radius: 100%;
}

.social__button i:hover {
    color: white;
}

.copyright {
    margin-bottom: 2.1rem !important;
    font-size: 18px;
    font-weight: bold;
}

.menu-link {
    color: black !important;
    font-weight: bold;
}

.menu-link-li {
    margin: 10px;
}

.footer-menu {
    margin-bottom: 0.7rem !important;
}

/*
 * END: Footer
 */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-sm text-center footer-menu">
            <ul class="list-unstyled">
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
                </li>
                <li class="menu-link-li">
                    <a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
                </li>
            </ul>
        </div>
        <div class="col-sm text-center">
            <div class="flex-container">
                <div class="w-100">
                    <div class="social">
                        <a href="#" class="social__button facebook">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="social__button instagram">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="social__button vk">
                            <i class="fa fa-vk"></i>
                        </a>
                        <a href="#" class="social__button youtube">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>
                <div class="w-100">
                    <span>+7(701)</span><strong>262-47-50</strong>
                </div>
            </div>
        </div>
        <div class="col-sm text-center">
            <p class="copyright">Copyright © 2018 example.com</p>
        </div>
    </div>
</div>
</footer>

Answer 1

您需要更改 background-size和 background-position <footer> 的属性:

footer {
    background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover;
}

看到它工作:https://jsfiddle.net/7mejchb8/11/

---

根据评论编辑:请参阅此示例，了解如何在所有设备上将页脚粘在页面底部，同时允许它具有可变高度，而不使用 position:absolute : https://jsfiddle.net/websiter/d4n1sxop/

它背后的 CSS 是:

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

header {
  flex-grow: 0;
}

main {
  flex-grow: 1;
}

footer {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 500px;
}