[英]Keeping image aspect ratio in responsive size division
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. 所以我有这个图库,其中有一个分区的可用图像的侧面列表,单击该列表可使用JavaScript更改另一个分区的图像源。所有分区的大小均以百分比指定,以便站点可针对每种分辨率调整大小。
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 其中#ThePicture是我需要帮助的图像的ID
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. 我需要保持#ThePicture的比率,以使图像不会失真,例如在宽屏分辨率上。
I came up with this solution for my issue.I am calling this function on img.Onload 我为这个问题想出了这个解决方案。我正在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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.