html 图片 保持长宽比,使用CSS保持div的长宽比

小编典典

只需

使用百分比值创建包装器padding-bottom，如下所示：

div {

width: 100%;

padding-bottom: 75%;

background: gold; /**

}

/* demonstration purposed only : non-essential */

.demoWrapper {

padding: 10px;

background: white;

box-sizing: border-box;

resize: horizontal;

border: 1px dashed;

overflow: auto;

max-width: 100%;

height: calc(100vh - 16px);

}

它将导致

高度等于其容器宽度的75％(长宽比为4：3)。

这取决于以下事实：

其他长宽比和100％宽度的填充底部值：

aspect ratio | padding-bottom value

--------------|----------------------

16:9 | 56.25%

4:3 | 75%

3:2 | 66.66%

8:5 | 62.5%

将内容放在div中：

为了保持div的长宽比并防止其内容拉伸，您需要添加一个绝对定位的子级，并使用以下方法将其拉伸到包装的边缘：

div.stretchy-wrapper {

position: relative;

}

div.stretchy-wrapper > div {

position: absolute;

top: 0; bottom: 0; left: 0; right: 0;

}

2020-05-13