将图片放入 div

Question

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

Answer 1

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

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

还有 CSS:

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

重点是使用 cover 显示大部分图像并覆盖整个图像的背景大小调整方法来缩放图像 div，这样您的项目的尺寸就会保持一致。

Answer 2

好的，我已经解决了这个问题。我已将 class 分配给 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% 的浏览器不支持封面； - 在后台使用 'fixed' 会导致不可预知的问题； - 你也可以尝试 background-size: contain 看看它是否会给你带来更好的效果。

此外，我建议在图像加载之前为图像保留一些 space，以避免在图像开始重新加载时文档回流。

.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 的一种方法。

Fill ：这将拉伸图像以适应父级而忽略纵横比。

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

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

.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

我猜你想要什么，我也看到 post 你已经回答了你自己的问题。这是另一种可能的解决方案。您可以使用它并为容器 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" />

将图片放入 div

Fitting picture into div

html

javascript

css

html-framework-7