1

抱歉，如果这里已经回答了这个问题，但我找不到适合我的问题的答案。

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

4

1 回答 1

0

我为我的问题想出了这个解决方案。我在 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;
}
于 2013-04-23T12:43:05.163 回答