Question

嗨，我很难让我的图像响应div。有没有办法简单地让css“切断”不合适的部分，只是简单地显示div中的任何内容？

HTML

<div class="col-md-4">
      <div style="height:42vh; background-color:#f2f2f2; margin-top:0px; margin-bottom:30px;" >
      <!--IMAGE DIV-->
      <div id="imgdiv" style="height:28vh;" class="img-responsive">
      </div>

      <div style="height:14vh; background-color:#1c1818; padding-top:0.95em; padding-left:1.75em; padding-right:1.75em;"><%= link_to event.name, event, 'data-no-turbolink' => true, :style=>"float:left; font-family: 'Roboto' !important; font-size:1.5em; color:white;" %> <br>
        <div style="float:left; font-family: 'Roboto' !important; font-size:1em; color:white; margin-top:0.15em;"><%= event.start_date.strftime('%B %d, %Y')%><br>
        <span style="float:left;"><%= event.city%> City</span></div>
      </div>

      </div>
</div>

CSS

#imgdiv{
background-image: url(http://lorempixel.com/500/226/fashion);
background-repeat: no-repeat;
background-size: contain;
}

我也使用twitter bootstrap，但class="img-responsive"不符合我的需求。当图像不具有相同的宽高比时，短边有空白区域 - 它总是试图将整个图像放入div中。还有另一种方法可以解决这个问题吗？我应该使用javascript吗？如果是这样，我该怎么做呢？

提前致谢。：）

Answer 1

在CSS中使用 background-size：cover; 而不是 background-size：contains; ，它会对您有帮助。

Answer 2

如果您希望背景图像根据视口在div中缩放，请尝试使用background-size: cover值：

#imgdiv{
  background-image: url(http://lorempixel.com/500/226/fashion);
  background-repeat: no-repeat;
  background-size: cover;
}

如果您希望背景图片只是“切断”，您可以尝试完全省略background-size属性...

Answer 3

要对其父节点做出响应，必须给它100％的宽度和自动高度。

示例css：

img {
    width: 100%;
    height: auto;
}

并且jsfiddle：https://jsfiddle.net/04mLykqc/

Answer 4

这可能与另一个问题重复。但看看这个。 https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

img {
   object-fit: cover;
}

基于div的缩放图像

4 个答案: