CSS height equals by related width

Question

In this case, I have a css like this:

.w{
    width:80%;
    display:block;
}

.d{
    width:14%;
    display:inline-block
}

and it's my html

<div class="w">
    <a href="#" class="d">1</a>
    <a href="#" class="d">2</a>
    <a href="#" class="d">3</a>
    <a href="#" class="d">4</a>
    <a href="#" class="d">5</a>
</div>

So the question is, Is that possible to make .d height equals by width of it? I mean some thing like: height: 14% OF WIDTH. I've read all units of css here, but I couldn't find anything useful

http://stackoverflow.com/questions/2648733/make-a-div-square-when-there-is-a-dynamically-changing-width-based-on-percenta — pol, Dec 09 '16 at 05:45

score -2 · Answer 1 · answered Dec 09 '16 at 06:31

If you can't do it with javascript, and you can relate the width to the viewport, you can set width and height the same % of viewport width

.w{
    width:80vw;
    display:block;
}

.d{
    width:11.2vw;
    display:inline-block;
    border:1px solid red;
    height:11.2vw;
}

<div class="w">
    <a href="#" class="d">1</a>
    <a href="#" class="d">2</a>
    <a href="#" class="d">3</a>
    <a href="#" class="d">4</a>
    <a href="#" class="d">5</a>
</div>

CSS height equals by related width

1 Answers1