Keep ratio of DIV or img

Question

I want to keep the ratio of DIV For example I use google map

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

It adjust the width to window or col-* for bootstrap.

it changes according to window size.

But now I want to keep the width:height ratio = 1 : 1

How should I do??

Same situation happens to img

I want to keep this img square

<img class="img-fluid" style="width:100%;">

Taka a look at this https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ — Chif, Nov 26 '19 at 06:32

score 2 · Accepted Answer · answered Nov 26 '19 at 06:32

2

You can use aspect ration css for maintening width and height eqauls. See below code and see Aspect Ratio for more information

.div {
   position: relative;
   width: 100%;
   padding-top: 100%;
}

<div id="map" class="div" style="background-color: grey;width:100%;"> Map here </div>

answered Nov 26 '19 at 06:32

Bhushan Kawadkar

Thank you it works well for my code. Thanks to your explanation, easy to understand. – whitebear Nov 26 '19 at 08:41

1 Answers1