如何在带有容器的div中保持图像与动画的纵横比？

.div-container {
  background-image: url('image.jpg');
  background-size: cover;
}

<div class="div-container">
  <img src="image.jpg" alt="Image" />
</div>

.div-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="div-container">
  <img src="image.jpg" alt="Image" />
</div>

.div-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 假设纵横比为4:3，可以根据实际情况调整 */
}

.div-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}