Đặt height theo width trong CSS

Đặt height theo width trong CSS

Đôi khi bạn muốn đặt height của một element theo width của nó nhưng chưa biết trước được giá trị của width là bao nhiêu, hãy thử sử dụng cách này:

<div id="wrapper">
    <div id="pad"></div>
    <div id="inner">
        My height follows my width
    </div>
</div>
#wrapper {
    display: inline-block;
    position: relative;
    width: 50%;
}
#pad {
    margin-top: 80%; /* tỷ lệ mong muốn */
}
#inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #E74C3C;
}
Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!