"object-fit: cover“不起作用

Question

我使用了CSS Grid Layout。为什么object-fit不起作用

Codepen

​

.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>

​

Answer 1

您需要将height:100%提供给.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>

​

或者，您也可以在父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>

​