[解決済み] divの中に画像(img)を入れて縦横比を保つにはどうしたらいいですか？

質問

48x48のdivがあり、その中にimg要素があるのですが、そのimgを部分的に失うことなくdivに収めたいのですが、その間に比率は保たれますか？

解決方法は？

cssを書く時点で画像の寸法が分からない場合は、切り抜き防止のためのJavaScriptが必要になります。

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

JavaScript Libraryを使用している場合は、それを利用するとよいでしょう。