最小宽度不能正确缩放图像?

My css for a background image doesn't "scale down" the image so you can actually view it, i've used min and max width, to no effect. I'm trying to do this task via html/css only, thanks! If a solution could be made without using absolute positioning that'd be great, because I do want this to be responsive.

我的背景图像的css没有“缩小”图像，所以你可以看到它，我用了最小和最大宽度，没有效果。我只是想通过html/css来完成这个任务，谢谢!如果一个解决方案可以不使用绝对的定位，那就太好了，因为我确实希望它能响应。

The placeholder image I want scaled down: http://socialnewsdaily.com/wp-content/uploads/2015/03/iStock-Unfinished-Business-11.jpg

我想要缩小的占位符图像是:http://socialnewsdaily.com/wp- content/uploads/2015/03/istock unfinish- business -11.jpg。

My code below: https://jsfiddle.net/L5e2myxj/6/

我的代码如下:https://jsfiddle.net/L5e2myxj/6/

html:

<h1>Our Thinking</h1>
<p style="color: red;">ocibus apeirian sententiae ex pri, id est altera delectus deterruisset. Admodum civibus nam et, ullum expetenda adipiscing nec eu. Eam an dicam dicant consectetuer. Alii zril gubergren te mei. Sit et natum simul sententiae, case meis dolores eam no. Cum ex verear animal, eruditi ancillae eos e</p>

<div class="article">
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo eveniet eaque magni accusantium iste provident ipsum velit odio vel, architecto quia officiis distinctio est, delectus soluta corporis, consectetur nobis?</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut aspernatur ducimus debitis laudantium repudiandae dignissimos, repellendus tempore reiciendis nostrum, amet animi iure laborum veritatis dolores labore est obcaecati sit ullam.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dol minima, quam similique eum ipsam.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quis sed, modi voluptatum provident incidunt voluptatibus aspernatur perferendis dolores illo voluptates ab, voluptate nulla. Minima nihil dicta, est possimus eligendi!Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Enim, reprehenderit, quas! Cupiditate esse perferendis dicta ad, error, quasi, iure dignissimos totam magnam dolores at, eos officia. Dolorum ad dicta accusantium.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, voluptas alias cupiditate officiis delectus autem qui, natus aliquid illum molestias illo possimus placeat obcaecati dolor porro recusandae numquam. Nam, recusandae.Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Illum quam nihil veritatis dolores veniam hic cumque dolor, numquam! Temporibus amet nemo beatae repellat eius exercitationem ad voluptates cupiditate laborum blanditiis.Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Similique ex nam, amet fugiat architecto praesentium iure dicta, debitis excepturi officiis dolor rem minima sapiente aliquid animi reiciendis et quam pariatur.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure accusantium optio cum. Magnam rerum sunt eligendi dolores, recusandae minima, repudiandae hic vero laboriosam mollitia, odit cum. Tempora sed fugiat consequuntur.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dol accusantium reprehenderit sint a officiis neque.</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis repellat aut tempora aspernatur tenetur possimus ipsum assumenda id esse in quos, cum enim dolorum fuga blanditiis. At perferendis, porro iure!</p>
    <div class="background-img">
      <div class="link"> Read More</div>
    </div>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi dignissimos aut soluta debitis laborum, unde voluptates aliquam, iste ne esse magni.</p>
          <div class="link"> Read More</div>
  </section>
</div>

css:

@import "compass/css3";
*,
*:before,
*:after {
  box-sizing: border-box !important;
}

.article {
  -moz-column-width: 26em;
  -webkit-column-width: 26em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

section {
  display: inline-block;
  margin: 0.25rem;
  width: 100%;
  background: #DBDBDB;
}

p {
  padding: 1;
  margin-top: 1em 0;
}


/*  styles for background color, etc; not necessary for this thing to work  */

.background-img {
  min-height: 5em;
  max-width: 100%;
  padding: 1rem;
  background-image: url(http://socialnewsdaily.com/wp-content/uploads/2015/03/iStock-Unfinished-Business-11.jpg);
}

body {
  font-family: "Garamond", serif;
  max-width: 100%;
  max-height: 100%;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
}

body {
  line-height: 1.25;
}

p {
  text-align: left;
}

edit I found a better solution

编辑我找到了一个更好的解决方案。

   -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;

This should both scale down the image and scale it up, but be wary it will skew proportions, which you can fix as mentioned in the other answer.

这既可以缩小图像，也可以放大图像，但是要小心，它会扭曲比例，你可以在其他答案中提到。

2 个解决方案

#1

I think you're looking for the background-size css property, in particular:

我认为你在寻找背景尺寸的css属性，特别是:

background-size: cover;

The width attribute applies to the div element itself, not the background image.

width属性应用于div元素本身，而不是背景图像。

#2

You can fix this with background-size

你可以用背景大小来解决这个问题。

Don't forget for the other browsers:

别忘了其他浏览器:

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

#1