Question

我面临将图片放入div的问题。基本上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。

＆＃13;

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

＆＃13;

和css。

＆＃13;

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

＆＃13;

Answer 3

以下是object-fit的方法。

填充：这会拉伸图像以适合父级，而不考虑宽高比。

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

封面：保持图像的宽高比并适合父容器，但最有可能裁剪图像。

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

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 5

您可以尝试以下两种方法：

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

两个说明： - 大约7％的浏览器不支持封面; - 使用＆＃39;固定＆＃39;有背景可能导致不可预测的问题; - 你也可以尝试背景大小：包含并查看它是否能给你带来更好的效果。

此外，我建议为图像保留一些空间，直到它加载，以避免图片开始重新加载时文档重排。

.card-container {
    position: relative;
}

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

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

将图片拟合成div

5 个答案: