[英]Keeping image aspect ratio in responsive size division
抱歉,这个问题已经在这里回答了,但是我找不到解决我问题的答案。
所以我有这个图库,其中有一个分区的可用图像的侧面列表,单击该列表可使用JavaScript更改另一个分区的图像源。所有分区的大小均以百分比指定,以便站点可针对每种分辨率调整大小。
现在为样式表:
#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%;}
其中#ThePicture是我需要帮助的图像的ID
和文件结构
<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 -->
我需要保持#ThePicture的比率,以使图像不会失真,例如在宽屏分辨率上。
我为这个问题想出了这个解决方案。我正在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.