Question

在我的液体布局中，我的div元素具有属性position-fixed。这意味着当我重新调整浏览器大小时，所有元素都保持在相同位置但缩小或增大。

问题是当我在我的div元素中放置一张图片时，它无法缩放以适合我的div元素，因此图片'泄漏'的div容器。

我需要的是：我的div元素和/或图片上的属性，以便图像与div容器保持相同的大小，并且当页面重新调整大小时，图像重新尺寸也是如此。这就是我所拥有的：

#div1 {
  position: fixed;
  background-color: blue;
  width: 100%;
  height: 10%;
  opacity: .3;
}

#div2 {
  background-color: green;
  position: fixed;
  opacity: .3;
  left: 20%;
  right: 20%;
  top: 10%;
  height: 40%;
  width: 60%;
}

#div3 {
  background-color: red;
  opacity: .3;
  position: fixed;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 40%;
  width: 60%;
}

#div4 {
  background-color: tan;
  opacity: .3;
  position: fixed;
  height: 80%;
  right: 80%;
  width: 20%;
  top: 10%;
}

#div5 {
  background-color: black;
  opacity: .3;
  position: fixed;
  height: 80%;
  width: 20%;
  left: 80%;
  top: 10%;
}

#div6 {
  background-color: purple;
  opacity: .3;
  position: fixed;
  top: 90%;
  width: 100%;
  height: 10%;
}

img {}

<div id="div1">
  <p>div1</p>
</div>
<div id="div2">
  <figure>
    <img class="pictures" src="assets/me.jpg" />
    <figcaption>
      This is a picture.
    </figcaption>
  </figure>

</div>
<div id="div3">
  <header>
    <h1>Introducing Me</h1>
  </header>
  <p>div3</p>
  <p>Hello eveyrone i am adan ramirez</p>
</div>

<div id="div4">
  <p>div4</p>
</div>
<div id="div5">
  <p>div5</p>
</div>
<div id="div6">
  <p>div6</p>
</div>

Answer 1

制作图片background-image: url(..img);

并在同一个div上应用background-size: cover;。

这里的关键是封面属性值，因为它告诉浏览器调整图像大小，同时保持宽高比适合所有方面。

@Sphinxxx建议使用background-size: contain;来解决OP问题;`

Answer 2

试试这个：

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

object-fit是一个非常酷的CSS3属性。

与contain值一起使用时，图像将在其容器内增大或减小，同时保持其宽高比。

以下是CSS-Tricks对其的描述：

object-fit属性定义元素如何响应高度和其内容框的宽度。它适用于图像，视频和其他可嵌入媒体格式与object-position结合使用属性。单独使用，object-fit让我们可以裁剪内嵌图像让我们对它如何s and和伸展进行细致的控制在它的盒子里。

由于browser support for this property仍然有点弱，这里的 polyfill 涵盖了包括IE9在内的所有主流浏览器：Polyfill for CSS object-fit property

有关更深入的了解，请参阅以下内容：

Answer 3

你试过了吗？

img {
    width: 100%;
}

Answer 4

尝试：

img {
  max-width: 100%; 
  max-height: 100%;
}
figure {
  height: 100%;
  width: 100%;
  margin: 0;
}

figure是父元素，因此您还需要设置它的高度/宽度。此外，图上的默认样式包括边距，因此您需要删除它以将图像保留在父div内。此外，如果您想将其保留在父div中，您可能需要使max-height更小以考虑标题。

如果您希望图像始终填充父级而不管其原始大小，也可以使用宽度和高度而不是max- *。

在重新调整屏幕大小

4 个答案: