"object-fit: cover" doesn't works

Question

I used CSS Grid Layout. Why doesn't works object-fit?

.slider__card__small_images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 10px;
  padding: 20px 0;
}

.small_image__link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #f2f4f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.small_image__link::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.small_image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="slider__card__small_images">
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/250" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/100" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/200" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/150" alt="" >
  </a>
</div>

It works alright but the `padding-bottom` in `.small_image__link::before` is what's causing the problem — nimsrules, Jun 28 '19 at 07:29

patelarpan · Accepted Answer · 2019-06-28T07:30:01.570

you need to give height:100% to .small_image__link.

.slider__card__small_images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 10px;
  padding: 20px 0;
}

.small_image__link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #f2f4f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.small_image__link::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.small_image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="slider__card__small_images">
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/250" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/100" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/200" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/150" alt="" >
  </a>
</div>

or also you can give row height in your parent grid-template-rows: 150px;

.slider__card__small_images {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 10px;
  padding: 20px 0;
  grid-template-rows: 150px;
}

.small_image__link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #f2f4f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;

}
.small_image__link::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.small_image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="slider__card__small_images">
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/250" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/100" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/200" alt="" >
  </a>
  <a href="#" class="small_image__link">
    <img class="small_image__img" src="https://picsum.photos/400/150" alt="" >
  </a>
</div>

"object-fit: cover" doesn't works

1 Answers1