DIV を使用して動的に作成されたテーブルがあります。表の各行には 2 つの画像があります。div (特定の行を表す) の高さを、その特定の行に表示されている 2 つの画像のうち大きい方の画像の高さに設定したいと考えています。表示される画像は常に変化し、外部サーバーからのものです。
画像が収まるように div の高さを設定するにはどうすればよいですか?
this.img = new Image();
this.img.src = url;
alert(this.img.width);
幅を与える
var img = new Image();
img.src = url;
alert(img.width);
しない..
なぜかわからない。
テーブル内の行にある 2 つの div のサイズを動的に変更しようとしている場合は、代わりに html テーブルを使用し、各画像を td タグ内に配置することをお勧めします。これにより、各セルの画像に応じて tr タグのサイズが変更されます。
あなたはできる:
画像が読み込まれたら、次を実行します。
document.getElementById("myDiv").height = document.getElementById("myImage").height
この質問にはさまざまな方法で回答があり、「これによりUIの見栄えが悪くなりませんか?」という追加の質問がありました。
その質問に対する答えは「はい」です。ほとんどの場合、divの高さを見栄えのするものに設定してから、画像を縮小して収まるようにするのが最善の方法です。これにより、レンダリングが高速になり、最終製品の見栄えが良くなり、よりプロフェッショナルになります。
しかし、それは私自身の意見です。それを裏付ける経験的データはありません。
ブラウザが画像の高さに基づいてレイアウトを行うようにしたい場合は、画像を取得する前に、その高さをブラウザのどこかに送信する必要があります。これには、サーバー側で何かが必要になります。最も速いのは、htmlに直接挿入することです。低速ですが、より洗練された方法は、JavaScriptを生成するcgiの特別なビットから命令を取得する<scriptsrc=>ステートメントを使用して画像ごとにフェッチすることです。(速度の違いは、ネットワークの往復によるものです。)
データの到着後にサイズを変更する場合は、はるかに簡単です。onloadハンドラーを画像に叩きつけるか、通常のdom(たとえば、実際のテーブルですが、divとcssで実行できます)に貼り付けて、レイアウトエンジンに作業を任せます。
それらをJavaScriptの画像オブジェクトに事前にロードしてから、高さと幅を参照するだけです。
すべてのブラウザで機能するには、巧妙な悪魔が必要かもしれません...
function getSize(imgSrc){
var aImg = new Image();
aImg.src = imgSrc;
aHeight = newImg.height;
aWidth = newImg.width;
}
非常に役立つようにするには、もう少し情報が必要です。ページが Javascript ( info )を介して読み込まれた後、画像の高さと幅を取得し、読み込み後に div の高さを変更できます。そうしないと、HTML 自体に何もないため、本当に運が悪くなります。
PHP を使用している場合は、 getimagesize()があります。これは、PHP でサイトを動的に構築する場合に使用できます。他の言語にも同様の機能がありますが、もう少し情報が必要です。