【问题标题】: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;
}
<textarea></textarea>

封面示例:

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

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

【讨论】:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-02
    • 2015-01-31
    • 2014-03-27
    • 2010-10-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多