2

I would like to set the height of a div to equal the width of a div. The tricky thing is that there is no set width for the div, since it is responsive. I have attached a picture of what I am aiming for. I would like to only use CSS for this. 

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-icon  name="add"></ion-icon>
        <h3>SIDE</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add"></ion-icon>
        <h3>FRONT</h3>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>TOP</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>SEAT</h3>
      </ion-col>
    </ion-row>    
  </ion-grid>

enter image description here

maudulus
  • 10,627
  • 10
  • 78
  • 117
  • interesting option here: https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square (you could use 20vw, 33vw, etc. as needed) – deebs Jun 12 '17 at 19:16

1 Answers1

0

If you want it to be pixel perfect (same height, same width) you could use this formula:

.stretchy-wrapper {
    width: 100%;
    padding-bottom: 100%; /* 1:1 */
    position: relative;
}

inside of it:

.container-div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

Here's a js fiddle: https://jsfiddle.net/a2j4sv2n/3/.

kochai
  • 49
  • 4