保持子div的宽高比与父级的高度和宽度变化
16lz
2021-01-22
I want to create a div that maintains aspect ratio with height and width changes of the parent.
我想创建一个div，它保持纵横比与父级的高度和宽度变化。
In the above gif, you can see that I was able to maintain the box div's aspect ratio when changing width but I'm unable to maintain it when changing height of the parent.
在上面的gif中，你可以看到我在改变宽度时能够保持box div的宽高比，但在更改父级的高度时我无法保持它。
.box {
width: 100px;
background-color: #dfdfdf;
max-width: 100%;
}
.box:after {
content: '';
display: block;
width: 100%;
height: 100%;
padding-bottom: 160%;
}
.wrap9 {
width: 125px;
height: 190px;
}<div class="wrap9">
<div class="box"></div>
</div>更多相关文章
- 如何在窗体上布局文本和输入以适应特定的宽度?
- 浮动到页面底部的可变高度页脚的CSS（不是视口）
- 100%高度分区内显示:表格单元分区
- 当内容宽度为自动时，隐藏滚动条（仍然能够滚动）不起作用
- JQuery基于元素的高度添加类
- 两个并列的div，一个确定宽度一个自动调整
- 如何让我的固定宽度移动网站始终显示“完全放大”？
- IFrame中的Div没有达到给定的高度
- CSS3列 - 添加第二个元素后的额外宽度