Question

我做了很多搜索，但我尝试的任何东西都不起作用。我需要图像来填充div的高度，额外的图像可以向右移动。但是我尝试的任何东西都不起作用......我错过了什么？我不想在这个盒子里看到任何红色，但保持图像的比例。谢谢！

<figure id="main-img"><img src="http://http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>

figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
    overflow: hidden;

}
figure#main-img img {
    width: 100%;
    object-fit: contain;
}

Answer 1

您可以使用_variable_value

https://jsfiddle.net/rhwx23o4/65/

height: 100vh;

Answer 2

选中此https://jsfiddle.net/rhwx23o4/76/

将height="100%"和width="100%"添加到图片代码

Answer 3

试试这个CSS。这是你想要的吗？我给了图像一个块的显示属性，并将对象适合改为覆盖而不是包含。

figure#main-img {
  width:100%;
  min-height: 200px;
  background-color: red;
  overflow: hidden;
}
figure#main-img img {
  display: block;
  min-height: 200px;
  width: 100%;
  object-fit: cover;
}

Answer 4

您可以display: flex; <figure>使用figure#main-img { width:100%; min-height: 200px; background-color: red; overflow: hidden; display: flex; } codepen：

<figure>

Flex具有调整内容的神奇力量。

如果您不希望display: inline-flex;占用整个屏幕宽度（它将是一个块元素），您可以将其显示更改为，然后为其添加一定的宽度/最大宽度

Answer 5

只是一点点的工作。在断点上，即840px，我为您的图片提供了属性display:none，并为同一图片提供了外部div背景。

注意：在媒体查询中，我必须对max-width进行硬编码。对于所有图像都不一样。

figure#main-img {
  width: 100%;
  min-height: 200px;
  background-color: red;
  overflow: hidden;
}

figure#main-img img {
  width: 100%;
}

@media (max-width: 840px) {
  div {
    background: url('http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg');
    height: 200px;
    background-size: cover;
    background-position: center center;
  }
  img {
    display: none;
    overflow: auto;
    min-height: 200px;
    max-height: 200px;
  }
}

figure {
  margin: 0px;
}

<figure id="main-img">
  <div><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg" /></div>
</figure>

需要图像来填充div的高度

5 个答案: