Keep ratio of DIV or img : <p>I want to keep the ratio of DIV
For example
I use google map</p>

<p><code>&lt;div id="map" style="background-color: grey;width:100%;"&gt; Map here &lt;/div&gt;</code></p>

<p>It adjust the width to window or <code>col-*</code> for <code>bootstrap</code>.</p>

<p>it changes according to window size. </p>

<p>But now I want to keep the width:height ratio = 1 : 1</p>

<p>How should I do??</p>

<p>Same situation happens to <code>img</code> </p>

<p>I want to keep this img square</p>

<p><code>&lt;img class="img-fluid" style="width:100%;"&gt;</code></p>
