title: How to adjust div height automatically along the div width according to resiging of browser
body: <p>I'm working to make a website responsive. I've used auto height for all the div. But, for a specific div, I've to use fixed height for all the size of a browser. But, instead of using putting the height manually at media query for every size's device/browser, I want to do it automatically/dynamic. May be javascript/jQuery can do it. But, I haven't so much knowledge about javascript/jQuery. So, I want your help. My container div's max-width: 1280px; I've a child div named "#artwork" which initial dimension is: 1065*695px. Taking base as container div's max-width and #artwork div's initial height, I want to give automatic height to #artwork for every resizing of browser. </p>
  
  <p>I can't give "#artwork" height: auto, because there are lots of big image at that "#artwork" div. But, by javascript, only one image has shown normally and by scrolling down, people can able to see the next image one by one. If I give height: auto or use minimum-height to "#artwork", all the images are shown. I've already put "artwork" div height manually at different type of css file by media query. But, I want to do it automatically, so the ratio is perfect for every size of browser at every device.</p>
  
  <p>Here is the examples of pages: <br />
  [dead links removed]</p>
  
  <pre><code>#container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     font-family: GandhiSansBold;
     position: relative;
  }
  
  #artwork {
     /*width: 1065px;*/
     width: 83.203%;
     height: 695px;
     margin: 0;
     float: left;
     overflow: hidden;
     margin-bottom: 10px;
  }
  </code></pre>
  
  <p>Please, be assure that, if the browser size is so big, the #artwork height can't cross the height:695px at any case by automatic resizing.</p>