css - 在 div 中调整背景图像的大小

Question

我真的需要一些帮助来解决这个问题。几天以来我一直在努力解决它，无法弄清楚如何解决。我已经检查过此站点的答案，但无法使用提供的答案解决我的问题。

我正在为一个新网站使用骨架 960 网格。

我正在创建一个单页网站，这是我的问题部分代码:

<div id="section-offerte"></div>
 <div id="page-offerte">
  <div class="container">
   <div class="sixteen columns">
    <div class="title-test">
     <h1>OFFERTE</h1>
    </div>
    <div class="fifteen columns"></div>
 </div><!-- container -->
</div><!--end page offerte-->

和我的CSS:

#page-offerte {
    height: 700px;
    width: 100%;
    padding-top: 100px;
    margin: 0 auto;
}
.container .fifteen.columns {
    height: 100%;
    min-height: 491px;
    float: left;
    background-size: cover;
    background-image: url(images/bg-offerte.png);
    background-repeat: no-repeat;
}
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container {
    width: 300px;
}
.container .columns, .container .column {
    margin: 0;
}
.container .fifteen.columns {
    width: 320px;
}
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
 .container {
width: 420px;
}
 .container .columns, .container .column {
margin: 0;
}
 .container .fifteen.columns {
width:420px;
}

Answer 1

你应该使用contain而不是cover。

function smallIt() {
  var img = document.getElementById("foo");
  img.style.width = "200px";
  img.style.height = "200px";
}

#foo {
  background: url("http://placekitten.com/300/300");
  background-size: contain;
  border: groove;
  width: 300px;
  height: 300px;
}

<div id="foo"></div>
<button onclick="smallIt()">Small it</button>