javascript - 将图片拟合到div中

Question

我在将图片放入 div 时遇到问题。基本上 div 是卡片标题。图片方向不同，大小也不同。我应该怎么做才能适应它们？

Photo in div

Answer 1

我使用这个技巧并且对我来说效果很好:

<div class="card" style="background-image: url(...)"></div>

还有 CSS:

.card {
   background-size: cover;
   height: 400px;
   width: 600px;
}

重点是使用 cover 背景大小调整方法缩放图像，该方法显示大部分图像并覆盖整个 div，以便您的元素大小一致。