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 に答える