基础 5：将我的 img 大小设置为 100% 的 div答案

【问题标题】：Foundation 5: Styling my img size to the be 100% of a div基础 5：将我的 img 大小设置为 100% 的 div
【发布时间】：2016-01-28 08:35:56
【问题描述】：

我正在使用 Foundation 5 来设置一个基本页面。我正在尝试获取一个按钮来更改某个 div 的背景图像。到目前为止，这可行，但它只显示图像的某个区域。

这是我目前的代码：

function cW() {
  document.getElementById("panel").style.backgroundImage =
    "url('https://dl.dropboxusercontent.com/u/36821301/csgo%20backgrounds/crimson-web.jpg')";
  document.getElementById("panel").backgroundImage.style.maxWidth = "100%";
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Foundation 5 testing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8" />
  <link type="text/css" rel="stylesheet" href="foundation_5.css">
  <link type="text/css" rel="stylesheet" href="include/foundation.css">
  <script src="include/foundation.min.js"></script>
  <script src="include/jquery.js"></script>
  <script src="include/modernizer.js"></script>
  <script src="foundation_5.js"></script>

</head>

<body>
  <div class="row">
    <div class="medium-12 columns">
      <div id="panel" class="panel">
        <h1>Foundation Page</h1>
        <p>Resize this responsive page to see the effect!</p>
        <ul class="button-group round">
          <li>
            <button type="button" class="button" value="cW" onclick="cW()">Crimson Web</button>
          </li>
          <li>
            <button type="button" class="button" value="mF" onclick="mF()">Marble Fade</button>
          </li>
          <li>
            <button type="button" class="button" value="d" onclick="d()">Doppler</button>
          </li>
          <li>
            <button type="button" class="button" value="rC" onclick="rC()">Rust Coat</button>
          </li>
          <li>
            <button type="button" class="button" value="dS" onclick="dS()">Damascus Steel</button>
          </li>
          <li>
            <button type="button" class="button" value="s" onclick="hB()">Hyper Beast</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

我想要达到的目标：我想在某个 div 中以全尺寸显示图像。

谢谢

【问题讨论】：

标签： javascript jquery css zurb-foundation zurb-foundation-5

【解决方案1】：

您需要在 div 的 CSS 中添加 background-size。类似的东西

background-size: 100% 100%;

或

background-size: cover;

或

background-size: contain;

你必须尝试每一种方法才能看到你想要哪一种。无论哪种方式，背景都将整齐地融入 div

希望对你有帮助

【讨论】：

可能也需要绝对定位。比如：background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
background-size: contain; 也可能是一个选项，具体取决于您所说的“100%”。
@ZacharyForrest，这对背景大小有什么帮助？
也许我理解错了。我的解决方案只是让图像成为整个页面的完整背景。
我试过了，效果很好！！！感谢您的快速反应！最后就是这么简单......

【解决方案2】：

在您的 css 文件中添加以下样式

 #panel{
    width:100vw;
    height:100vh;
  }

【讨论】：