Henrik Petterson February 2016

CSS: Make object-fit work with min-height

Is there any way to make object-fit work with min-height?

See this jsfiddle for example.

If I set a fixed height, it works, but if I set a min-height, it doesn't work.

HTML:

<div class="container">

  <div class="b_feat_img">
     <img src="http://i.imgur.com/iEJWyXN.jpg">
  </div>

</div>

CSS:

.container {
  width:120px;
}

.b_feat_img {
  border: 1px solid green;
  background: red;
  float: left;
  height: auto;
  min-height:130px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}
.b_feat_img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Answers


Pangloss February 2016

The min-height needs to set on the img element, not the container.

In additional, you can also set vertical-align:top or display:block on the img to get rid of the unwanted whitespace below it.

.container {
  width:120px;
}

.b_feat_img {
  border: 1px solid green;
  background: red;
  float: left;
  height: auto;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}
.b_feat_img img {
  object-fit: cover;
  min-height: 130px;
  width: 100%;
  vertical-align: top;
}
<div class="container">

  <div class="b_feat_img">
     <img src="http://i.imgur.com/iEJWyXN.jpg">
  </div>

</div>


DebRaj February 2016

You can use position: absolute to the img in css.

So it will be like: HTML:

<div class="container">

  <div class="b_feat_img">
     <img src="http://i.imgur.com/iEJWyXN.jpg">
  </div>

</div>

CSS:

 .container {
      width:120px;
    }

    .b_feat_img {
      position: relative;
      border: 1px solid green;
      background: red;
      float: left;
      width: 100%;
      min-height:130px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .b_feat_img img {
      position: absolute;
      height: 100%;
      width: auto;
    }

fiddle:

https://jsfiddle.net/b93txe6t/1/

Hope that helps.

Post Status

Asked in February 2016
Viewed 2,554 times
Voted 14
Answered 2 times

Search




Leave an answer