レスポンシブデザインと流動的な画像に基づいて、画像の高さを常にウィンドウの高さの 1/4 にしようとしています
画像はデータベースによってランダムに取得された画像なので、引き伸ばされるかどうかはわかりません。
これは私が今まで得たものです
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(ここから mif1 による anser に基づいて、申し訳ありませんがギリシャ語)
以上です。ブラウザを開くだけでブラウザが画面全体に拡大する場合は、正常に動作します。
問題
-画像をコンテナーの中心に揃えることができません。やってみmargin, padding, float, position:absoluteました。何も機能しません
-ブラウザーのウィンドウのスケーリングを開始すると (単に 1 つのコーナーをドラッグするだけ)、画像の高さが「追従」しません。サイズを変更しますが、実際には画面の高さの 1/4 ではありません。
-ブラウザを開いて画面全体に拡大しない場合、画像の高さが画面の高さの 1/4 にスケーリングされません。
何かアドバイスはありますか？
前もって感謝します