随着浏览器窗口的变化，您如何保持全窗口图像和元素的比例？答案

【问题标题】：How do you keep full-window images & elements proportional as the browser window changes?随着浏览器窗口的变化，您如何保持全窗口图像和元素的比例？
【发布时间】：2018-03-15 14:30:02
【问题描述】：

我正在尝试找出方法来保留填充浏览器窗口的图像、文字和其他图形元素，以保持它们之间的比例和相互关系，同时在调整窗口大小时继续填充窗口。

要了解我的意思，请查看以下示例：

示例 1： https://www.nytimes.com/2017/09/26/magazine/how-fake-news-turned-a-small-town-upside-down.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine&region=stream&module=stream_unit&version=latest&contentPlacement=1&pgtype=sectionfront

示例 2： https://www.nytimes.com/2017/09/28/magazine/here-comes-the-closer-in-the-seventh-inning.html?rref=collection%2Fsectioncollection%2Fmagazine&action=click&contentCollection=magazine&region=rank&module=package&version=highlights&contentPlacement=6&pgtype=sectionfront

请注意每张照片中的照片，尤其是示例 1 中的照片，是如何没有被拉伸或挤压出其自然形状的。另请注意，无论浏览器窗口大小如何，始终显示图像的全宽或全高。此外，类型（标题和介绍文案）仍固定在左下方并保持相同大小。

我怎样才能达到这个效果？

另外，我想知道如何设置页面，以便大图像和伴随它的图形每隔几秒改变一次。

我更愿意做的是CSS，也欢迎HTML等解决方案。

谢谢。

【问题讨论】：

正如我在源代码中看到的，这是由 javascript 完成的，它会在您每次调整大小更新时计算其高度和宽度。
Dorvalla，您能否提供我将使用的 javascript 代码。抱歉，我对编码还很缺乏经验。

标签： css scaling

【解决方案1】：

我想你在找background-size: contain;

与background-size: cover; 相比，它不确保背景图像覆盖整个容器，而是调整背景图像的大小，使高度和宽度与容器的大小相同或小于容器的大小。

包含示例：

textarea {
  width: 100px;
  height: 100px;
  background-image: url('http://via.placeholder.com/100x100');
  background-size: contain;
  background-repeat: no-repeat;
}

&lt;textarea&gt;&lt;/textarea&gt;

封面示例：

textarea {
  width: 100px;
  height: 100px;
  background-image: url('http://via.placeholder.com/100x100');
  background-size: cover;
  background-repeat: no-repeat;
}

&lt;textarea&gt;&lt;/textarea&gt;

旁注：我特意在示例中使用了 textareas，因为它们可以在右下角轻松调整大小以进行测试

【讨论】：

这解决了这个问题，但并不完全。使用这个代码——并用 100% 代替精确的像素测量，正如 3Demon 建议的那样——图像确实会随着浏览器窗口缩放并且按比例缩放。但是，它并不总是在保持比例的同时填充窗口。仍然可以打开窗口以查看图像未覆盖的区域。
请查看我原始帖子中的链接示例，看看图像在您更改浏览器窗口形状时的表现。图像的两侧可能会出现部分裁剪；说，水平。但另一个维度完全（或几乎完全）可见。

【解决方案2】：

对于这种效果，您必须以 % 为单位提供宽度。不要以像素为单位指定图像的高度和宽度。您必须使用 '%' 来根据屏幕尺寸或浏览器尺寸改变图像宽度（与高度成比例）。

如果您希望以像素为单位提供高度和宽度，则必须使用 CSS 中的媒体查询来指定不同屏幕尺寸的高度和宽度。

【讨论】：