0

I have some inputs which shape is square (same height same width). Their widths are related to the windows width in a responsively. But I want them to change the height automatically too when window's WIDTH is changed so they preserve the square shape.

Does this behaviour exist on CSS or jQuery?

R01010010
  • 5,670
  • 11
  • 47
  • 77
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – Nico O Jul 13 '16 at 10:07
  • try to use vh for height and vw for width, otherwise use % for width and height in css – Udhay Titus Jul 13 '16 at 10:11

1 Answers1

0

You can achieve this with jquery resize(). You would have to get the width of the window whenver it is resize and set up your squares width and height accordingly. 

var w = window.innerWidth;

I created a simple fiddle for you https://jsfiddle.net/mdoLaxtL/7/ . Hope that helps.

K Nugal
  • 134
  • 9