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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.