html - 最小宽度不能正确缩小图像？

Question

我的背景图像 CSS 不会“缩小”图像，因此您可以实际查看它，我使用了最小和最大宽度，但没有效果。我正在尝试仅通过 html/css 完成此任务，谢谢!如果可以在不使用绝对定位的情况下制定解决方案，那就太好了，因为我确实希望它能够响应。

我想要缩小的占位符图像:http://socialnewsdaily.com/wp-content/uploads/2015/03/iStock-Unfinished-Business-11.jpg

我的代码如下: 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;
}

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

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

这应该同时缩小和放大图像，但要小心它会扭曲比例，您可以按照其他答案中的说明进行修复。

Answer 1

我认为您正在寻找 background-size css 属性，特别是:

background-size: cover;

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