パーセンテージとしてパーセンテージを使用してHTMLでイメージのサイズを変更するにはどうすればよいですか？

Question

私のウェブサイトで画像のサイズを変更したいと思います。前に画像のサイズを変更したり、幅と高さを計算したり、ピクセル単位で値を設定したりすることで、その方法を知っています。しかし、同じ画像を異なるディミクションで複数回使用するので、画像を自分のサイズに相対的にリサイズできれば、時間がかかりません。

<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/