如何使背景图像填充 div 并做出响应答案

【问题标题】：How to make background-image fill the div and responsive如何使背景图像填充 div 并做出响应
【发布时间】：2019-01-15 19:03:10
【问题描述】：

我想制作一个带有背景图片的 div，顶部会有 3 个这样的社交媒体图标：

我想要的：

div#second-footer-container {
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100%;
}

p#socmed-container {
  text-align: center;
}

p#socmed-container a {
  padding: 0 5px !important;
}

<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img" width="25" src="https://i.imgur.com/6ye5lwf.png" alt="Facebook" />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img" width="25" src="https://i.imgur.com/SEsRzFL.png" alt="Instagram" />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img" width="25" src="https://i.imgur.com/y8o23cc.png" alt="Twitter" />
    </a>
  </p>
</div>

但结果看起来不像我想要的，我的结果是背景似乎只遵循主要内容的高度：

我希望宽度为 100%，高度也是 100%，并且我希望它具有响应性

【问题讨论】：

标签： html css background background-image

【解决方案1】：

使用background-size:contain

在不裁剪或拉伸图像的情况下尽可能大地缩放图像。

background-size - reference

body,html{
  height: 100%;
}
div#second-footer-container {
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
}

p#socmed-container {
  text-align: center;
}

p#socmed-container a {
  padding: 0 5px !important;
}

<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img" width="25" src="https://i.imgur.com/6ye5lwf.png" alt="Facebook" />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img" width="25" src="https://i.imgur.com/SEsRzFL.png" alt="Instagram" />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img" width="25" src="https://i.imgur.com/y8o23cc.png" alt="Twitter" />
    </a>
  </p>
</div>

【讨论】：

与background-position: 50% 50%
它使得宽度只填充不到 div 的 50% 而高度仍然相同result
看我的例子 - 我添加了body,html{height: 100%}，否则包含的div高度很小，不会占据100%的窗口。

【解决方案2】：

也许这就是你需要的：

#second-footer-container{
  background-image: url("https://i.imgur.com/0qRwdSI.png");
  width: 100% !important;
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 200px;
}
#socmed-container{
  text-align: center;
}
#socmed-container a{
  padding: 0 5px !important;
}

<div id="second-footer-container">
  <p id="socmed-container">
    <a href="https://www.facebook.com/test/">
      <img id="fb-img"
           width="25"
           src="https://i.imgur.com/6ye5lwf.png"
           alt="Facebook"
       />
    </a>
    <a href="https://www.instagram.com/test/">
      <img id="ig-img"
           width="25"
           src="https://i.imgur.com/SEsRzFL.png"
           alt="Instagram"
       />
    </a>
    <a href="https://www.twitter.com/test/">
      <img id="twitter-img"
           width="25"
           src="https://i.imgur.com/y8o23cc.png"
           alt="Twitter"
       />
    </a>
  </p>
</div>

【讨论】：