将图片适配到div

Question

我面临着将图片放入div的问题。基本上div是卡片的标题。图片的方向和大小不同。我应该怎么做才能让他们适应？

照片在div

Answer 1

下面是一种使用对象拟合的方法。

填充：这将拉伸图像以适合父对象，而不考虑纵横比。

包含：保留纵横比，但可能会增大或减小图像的大小。低分辨率放大可能会失真。

封面：保持图像的纵横比，适合父容器，但很可能裁剪图像。

.img-container {
  height: 300px;
  width: 400px;
  background-color: yellow;
}

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

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

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

<h1>Cover</h1>

<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" />
</div>

<h1>Contain</h1>
<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" />
</div>

<h1>Fill</h1>
<div class="img-container">
  <img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" />
</div>

Answer 2

好的，我已经解决了这个问题。我已经给这个部门分配了班级。

<div class="fill">
  <img src="...">
</div>

Answer 3

我使用这个技巧，对我来说效果很好：

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

和CSS：

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

关键是使用显示大部分图像并覆盖整个div的背景大小调整方法来缩放图像，以便您的项目大小保持一致。