响应式更改div大小,保持宽高比

当我给图像一个宽度或高度的百分比时,它只会保持其宽高比增长/缩小,但是如果我想与另一个元素具有相同的效果,是否完全可以使用百分比将宽度和高度绑定在一起?

回答:

您可以使用纯CSS来实现;无需JavaScript。这利用了padding-top百分比(相对于包含块的)(有点违反直觉)的事实。这是一个例子:

.wrapper {

width: 50%;

/* whatever width you want */

display: inline-block;

position: relative;

}

.wrapper:after {

padding-top: 56.25%;

/* 16:9 ratio */

display: block;

content: '';

}

.main {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

/* fill parent */

background-color: deepskyblue;

/* let's see it! */

color: white;

}

<div class="wrapper">

<div class="main">

This is your div with the specified aspect ratio.

</div>

</div>

以上是 响应式更改div大小,保持宽高比 的全部内容, 来源链接: utcz.com/qa/403899.html

回到顶部