javascript - 这个网页的响应式效果是如何完成的？（图片作为div的背景图片，div几乎没有内容，div如何被撑起来并自适应的？）

Question

http://www.lendlease.com/au/
这个页面上的图片是作为p的background-image，p设置了几个断点，前面几个断点的响应式比较简单，p有固定宽高，然后屏幕不断缩小到手机大小后，p就是宽度跟随屏幕，高度和宽度一致，
问题：这个p高度如何和宽度保持一致的？图片是作为背景图片，而不是作为内容，所以p不能依靠图片作为内容支撑宽高，p也几乎没有内容，是什么支持它自适应的呢？
我是css和js新手，看源代码怎么也看不出是怎么实现的，求高人解答，谢谢！

Answer 1

https://jsfiddle.net/jxtzjv6k/

直接给你个例子看- -跟你给的那个链接的网站完全一样的原理和写法，
图片容器的父容器的宽度是33.333...%，高度是before用padding-top:100%撑开的，100%就是直接根据【上级宽度】的数值计算的，所以这样只能撑出个正方形，需要长方形改变padding-top：50%这样使用上一级50%的宽度作为高度就行了- -

Answer 2

background-size:cover这是一条C3的属性,可以自适应背景图.

Answer 3

可以在楼上的基础上再加一句background-position-x: center;

Answer 4

看了源代码，感觉不是背景图把p撑大的，而是在加了伪对象选择符::before，然后通过设置内填充将p本身也撑大的，然后就能显示背景图了

大概是这样的

p::before{
            content: "";
            display: block;
            padding-bottom: 36.111%;
        }

而楼上所说的 background-size:cover 只是让图片把整个p填充满，并不能撑大p

Answer 5

.container-video 的样式中有min-height:400px 和 ::before 设置了内边距, 两个共同作用的结果