将图片放入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，以便您的项目大小一致。

Answer 2

好的，我已经解决了这个问题。我已经为 div 分配了类。

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

在 css 中。

.fill {
  max-width: 70%;
  height: 100%;
}

.fill img {
  width: inherit;
  height: inherit;
}

Answer 3

您可以尝试以下两个选项：

.card-image {
    background: url(...);
    background-size: cover;
}

两个注意事项： - 大约 7% 的浏览器不支持封面； - 在背景中使用“固定”可能会导致不可预知的问题； - 你也可以试试 background-size: contains 看看它是否能给你更好的结果。

另外，我建议在图像加载之前为图像保留一些​​空间，以避免在图片开始重新加载时文档重排。

.card-container {
    position: relative;
}

.card-image {
    padding-bottom: 56.25%; //for 16:9 ratio
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
 }

Answer 4

这是object-fit 的一种方法。

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 5

我猜你想要什么，我也看过你回答自己问题的帖子。这是另一种可能的解决方案。您可以使用它并将容器width 和height 设置为不同的值。我用了两张图片。一个是height>width，另一个是height<width。 这里也是fiddle

.img-container {
  border: 2px dashed #f00;
  line-height: 0;
  text-align: center;
}
.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

<div class="img-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho">
</div>
<div class="img-container">
  <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />