Почему padding-top + object-fit не работает на изображениях?

Question

Я хочу сделать изображение адаптивным квадратом.Поэтому мы решили абсолютно упорядочить изображение, указав padding-top: 100% в качестве псевдоэлемента родительского элемента изображения.Мы думали, что если бы мы применили object-fit: cover к изображению, изображение было бы квадратным.не работает.

Как создать адаптивный квадрат с помощью CSS и применить object-fit?

.theme-color-text {
  position: relative;
}

.theme-color-text::before {
  margin-top: 10px;
  display: block;
  content: "";
  padding-top: 100%;
}

.image {
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  object-fit: cover; /* If the image is small, it will not be enlarged to a square. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/600/500/animals" class="image">
          <!-- correct -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/150/50/animals" class="image">
          <!-- incorrect -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/50/25/animals" class="image">
          <!-- incorrect -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Согласно Значениям изображения CSS и модулю заменяемого содержимого Уровень 3 , свойство object-fit требует высоты и ширины .

5,5.Объекты определения размера: свойство object-fit

Свойство object-fit указывает, как содержимое заменяемого элемента должно быть размещено в блоке, установленном его используемой высотой и шириной .

В этом случае в вашем коде отсутствует спецификация свойства height.Пожалуйста, попробуйте этот код.

.theme-color-text {
  position: relative;
}

.theme-color-text::before {
  margin-top: 10px;
  display: block;
  content: "";
  padding-top: 100%;
}

.image {
  width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  /* Add the specification of the `height` property. */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/600/500/animals" class="image">
          <!-- correct -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/150/50/animals" class="image">
          <!-- incorrect -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3">
      <div class="row post">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/50/25/animals" class="image">
          <!-- incorrect -->
        </a>
      </div>
      <div class="row post-detail">
        <div class="col-auto">
          <i class="fas fa-heart"></i>
        </div>
        <div class="col-auto">
          <i class="fas fa-eye"></i>
        </div>
        <div class="col-12 comment-area">
          text
        </div>
      </div>
    </div>
  </div>
</div>