Keeping image aspect ratio in responsive size division

Question

Sorry if this question is already answered here,but i couldn't find an answer working for my problem.

So i have this Gallery that has side list of available images in one division , which upon clicking changes the source of image in other division using JavaScript.All division sizes are specified in percents,so that the site resizes for every resolution.

Now for the Stylesheet :

#ActiveView {position: absolute;left:1%;right:1%;margin-top:1%; height:97%; 
        background:url('../img/alpha/222.png');
background-size:100%;background-repeat: no-repeat;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;}

 #ThePicture {position: absolute;height: 100%;max-width: 100%;}

where #ThePicture is id of the image i need help with

and document structure

 <div id="ViewPort">
    <div id="ActiveViewWrap">
      <div id="ActiveView">
          <img id="ThePicture" src="../img/galery/TeaPlant.jpg">
        <div id="OrigSizeLinker"> Plná Velikost </div>
      </div> <!-- closes ActiveView -->
   </div> <!-- closes ActiveViewWrap -->
   <div id="ActiveNoteWrap">
     <div id="ActiveNote">contentNote  </div>
   </div> <!-- closes ActiveNoteWRAP -->
 </div> <!-- Closes ViewPort -->

What i need is to keep the ratio of #ThePicture so the image is not distorted for example on widescreen resolution.

maybe this might help: http://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio — Martin Turjak, Apr 20 '13 at 15:43
Thanks but unfortunately this didnt solve my issue,my image has mostly bigger height , and smaller width. — Slytherin, Apr 20 '13 at 16:49

score 0 · Accepted Answer · answered Apr 23 '13 at 12:43

I came up with this solution for my issue.I am calling this function on img.Onload

function KeepRatio() {
var height = document.getElementById('ThePicture').height;
var width = document.getElementById('ThePicture').width;
var origHeight = document.getElementById('ThePicture').naturalHeight;
var origWidth = document.getElementById('ThePicture').naturalWidth;
var ratio = origWidth / origHeight;
document.getElementById('ThePicture').width = height * ratio;
}

Keeping image aspect ratio in responsive size division

1 Answers1