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;

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

Answer 2

您可以使用background-size

解决此问题

不要忘记其他浏览器：

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

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

2 个答案: