Question

很抱歉，如果这个问题已在这里得到解答，但我找不到适用于我的问题的答案。

所以我在这个图库中有一个分区中的可用图像的侧面列表，在点击时使用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的比例，以便图像不会失真，例如在宽屏分辨率上。

Answer 1

我为我的问题提出了这个解决方案。我在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;
}

保持图像宽高比在响应大小划分

1 个答案: