masalibの日記

システム開発、運用と猫の写真ブログです

javasciptで表示領域から画像のピクセルを指定する

古いシステムで画像を表示する関数で tableタグのなかにtableを使って表示しているという 超ーーーいけていないのがあり、 ピクセルサイズが大きいサイズがきた時に 画面幅を振り切れるというバグがあった

単純にjsでパーセントを指定すると小さくなりすぎるという問題があった 結局、表示領域から計算して ピクセルを指定といういけてない形になった

<html><body>
<tbody><tr>
    <tr>
        <td class="orangeHdr">写真<br>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="4">
            <tbody><tr>
            <td width="130" align="center">
            <img id="img" src="https://lh3.googleusercontent.com/4yQhH6EqCJJKFr7gOybqoaKRfkDZ5HJsmvBLE4OwdfP7BT3GSIRXFG5JGpgVoT3QFCeqNb51qS6BySmj-jtC9pKsN4CrF1zegxouVf11bkJe24JXoNoe7zys-RgyQTBFYOWLaNTj8nDEtZZtc2YoyDF3QmJzyu5CzCKQiccrP1e3jyLw8RYCwi25q7Sx9eWli_KfPbvJRZe5LLUmlX9kJHHNJMFFIdk4qJMhOdmogJ9_PHIikmPK4bGDqLcnu8kaLoU9l3enylHrCfIV89HL18dOwaLer2J9NnA11blX1ojn4OBv-bNsWobunCrGyFu_O09DTLwE_I-iLjCfv07DBje1Oil3yQ1kAwIr7ZsbyS4fshpxxc-gwB_mRz55aVDopiwSdPxegY-NRWjzfx8SS88KUzBURhxRNLJwY9HLNlFUEeYsp1-PvvwgAWwE8-wl4memdO5egqW8zldF5uP_QlSmXnojl3cYysPK447O-9s8fBMKr_GjaLV3mYxLl-AUkWeMiqmJY_fIY8MwJiVpDr6dF0vduD0IF03AogXrb7vfw96r0YupyJbyEt2rwwZX4xzsvMsMLYjKLrjaMkJv_rDMZdtAOJ2kTa0IK9iLlqkJdZss691GSfrAFTj0y_Jgs6LOCg-5pnjCESfBOFu8heIdtyXyXXyRaVtHCS--zuKrhgqo-cbnD2QFKoUnPQHM9DarTkUqMH48zci9ZxA=w1218-h913-no" >
            <div style="background-color:white;font-weight:bold;font-size:10pt;text-align:center:padding:2px;margin:1px" id="state">現在</div>
            </td>
            <td valign="top">
            <input type="file" name="file" id="file"><br><br>
            <input type="hidden" name="pv" value="">
            </td>
            <input type="hidden" name="pvfile" value="/img/Common/Result/Result/00108216.jpg?dmy=2019%2F03%2F29+18%3A37%3A15">
            </tr>
            </tbody></table>
            </td>
    </tr>

</tbody>
    <script language="JavaScript">
       var element = document.getElementById("img") ;

       var intervalId = setInterval( function () {
           if ( element.complete ) {
               var width = element.naturalWidth ;
               var height = element.naturalHeight ;
               console.log("source image width");
               console.log(width);
               var sw  = window.innerWidth; 
               console.log("window.innerWidth");
               console.log(sw);

               if ((width * 0.8) > sw){
                   console.log("画面幅にあわないのでstyleあわせる");
                   console.log(sw * 0.6);
                   element.style.width = sw * 0.6;
                   console.log("update style");
               }
 

               clearInterval( intervalId ) ;
           }
       }, 1000 ) ;
   </script>
</body>
</html>

関係ないけど・・・

検証用にcodepenを使っていたら落ちた・・・

自分が原因かとあせった