基于div的缩放图像

时间:2015-12-17 08:49:19

标签: html css html5 css3

嗨,我很难让我的图像响应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吗?如果是这样,我该怎么做呢?

提前致谢。 :)

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:1)

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

示例css:

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

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

答案 3 :(得分:1)

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

img {
   object-fit: cover;
}