Letting the height of the div equal the width using only css

Question

Letting the height of the div equal the width using only css

Navigation

#1 by (0 votes)

0

Let's say I have 4 div, with the width:25% property. In a space of 1000px, that 25% would represent 250px.

<div style="width:1000px"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
</div>

Using only css, you could "capture" the width of the responsive div in pixels and apply that captured value to the height property.

It would be something like:

<div style="width:1000px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
    <div style="width:25%; height: 250px"></div>
</div>

My question is only about css, if it is possible to do this using only css, because I know that it is possible to achieve this goal using js.

css

asked by anonymous 17.06.2017 / 19:43

1 answer

How do I get information from the first three rows of a table? How do I create a map with a proximate circumference? [closed]

score 0 · Answer 1

Hello, try this and see if it solves your problem.

<div style="width:100px; height: 400px; background: #4a4a4a">
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
    <div style="width:25%; margin: 1px; padding-bottom: 25%; background: #fff"></div>
</div>