How can i keep shape of div constructed by max-width, max-height?

Question

I need div to keep required shape (width/height proportion), for instance square and at the same time div should occupy as much as possible of the parent container within set limits, for instance up to 90% of the height and up to 60% of the width. I can achieve it with the help of the javascript but i would like to see css solution.

 $(document).ready(function() { var a = Math.min($('div').width(),$('div').height()); $('div').width(a).height(a); }); 

 html,body { height:100%; } div { max-width:60%; max-height:90%; height:100%; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> 

Answer 1

Not sure if I entirely understand the question, but there is a css only way to maintain aspect ratio while setting a fluid width.

You can set a width in percentage, and use padding-bottom set to a percent to add the height.

This will keep the aspect ratio the same as the width changes on resize.

div {
  width: 33.33%;
  float: left;
  border: 1px solid grey;
  padding-bottom: 20%;
}

Example Codepen .

You may need to mess with the padding-bottom percent until it matches your desired aspect ratio.