在響應尺寸分區中保持圖像縱橫比

對不起，如果這個問題已經在這裏得到解答，但我找不到解決我的問題的答案。在響應尺寸分區中保持圖像縱橫比

所以我有這個畫廊有可用圖像側名單在一個部門，該部門在點擊改變圖像的其他部門使用JavaScript.All劃分大小的源以百分比指定，使網站重新調整爲每一項決議。

現在的樣式表：

#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的圖像，因此圖像不會在寬屏分辨率上失真。

來源

2013-04-20 Slytherin

這個功能也許這可能幫助：http://stackoverflow.com/questions/4394309/how-do- i-fit-an-image-img-div-and-keep-the-aspect-ratio – 2013-04-20 15:43:08

謝謝，但不幸的是，這並沒有解決我的問題，我的圖像大多數高度較高，寬度較小。 – Slytherin 2013-04-20 16:49:33

我想出了這個解決方案，我issue.I我呼籲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-23 12:43:05 Slytherin

在響應尺寸分區中保持圖像縱橫比

回答

相關問題