当屏幕被重新调整大小时，使图片随父容器按比例缩放。

Question

当屏幕被重新调整大小时，使图片随父容器按比例缩放。

htmlcss

4

在我的流式布局中，我的

元素具有position-fixed属性。这意味着当我调整浏览器大小时，所有元素保持在同一位置但缩小或增大尺寸。

问题是当我将图片放入其中一个

元素中时，它不会缩放以适应我的

容器，因此图像会“泄漏”出其

容器。

我需要的是：在我的

元素和/或图像上设置属性，使图像保持与

容器相同的尺寸，当页面重新调整大小时，图像也会重新调整大小。这就是我的代码片段：

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

- Adan

4个回答

3

试试这个：

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

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

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

这是CSS-Tricks对其的描述:

object-fit属性定义了元素如何响应其内容框的高度和宽度。它适用于图像、视频和其他可嵌入媒体格式以及object-position属性。单独使用object-fit，我们可以通过对其内部进行微调来裁剪内联图像。

由于浏览器对此属性的支持仍然有些薄弱，因此这里提供一个polyfill，覆盖了所有主要浏览器，包括IE9：CSS对象适配属性的Polyfill

以下是一些参考资料：

- Michael Benjamin

1

不知道这个属性，但像预期的那样支持不好。http://caniuse.com/#feat=object-fit - Muhammad Umer

这很惊人，因为我一直觉得图像标记需求被忽视了。 - Muhammad Umer

0

你试过了吗：

img {
    width: 100%;
}

- Hugo Sainte-Marie

是的，当我调整浏览器大小时，图像会溢出其div容器。 - Adan

图片实际上是否保持相同的大小还是被调整了大小？它会水平泄漏、垂直泄漏（或两者都有）吗？ - Hugo Sainte-Marie

宽度非常完美，不会泄漏并且随着div缩放。然而...高度一开始就泄漏，并且在我重新调整大小时仍然如此。 - Adan

您想要图像垂直裁剪，还是缩小以适应高度？ - Hugo Sainte-Marie

0

尝试：

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

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

如果您希望图像始终填充父元素而不考虑其本机大小，则可以使用宽度和高度而不是max-*。

- Jason

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muhammad Umer · Accepted Answer

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

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

这里关键是cover属性值，它告诉浏览器调整图像大小，同时保持纵横比以适应所有边缘。

@Sphinxxx建议使用background-size: contain;解决了OP的问题；