html - パラメータとしてパーセンテージを使用してHTMLで画像のサイズを変更するには?

Question

Web サイトの画像のサイズを変更したいと考えています。前に画像のサイズを変更するか、幅と高さを計算して値をピクセル単位で設定することで、それを行う方法を知っています。しかし、同じ画像をさまざまな寸法で複数回使用するため、画像を独自のサイズに合わせてサイズ変更できれば、時間がかかりません.

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>

私はこれを試しましたが、問題はサイズが親要素に対して相対的に設定されていることです。

Answer 1

HTML や CSS だけを使用して自動的にやりたいことを行う方法はありません。JavaScript を使用して画像の寸法を取得し、それらの寸法のパーセンテージを計算して、ピクセル単位で画像に再適用する必要があります。

Answer 2

方法はありますが、完璧ではありません。表示が「inline-block」に設定され、画像が「max-width」を使用してサイズ変更されるラッピング要素が必要です。

問題は、親要素が画像の元の幅を保持することであり、要件によっては問題が発生する可能性があります。

例: http://jsfiddle.net/amustill/GnEw5/