[解決済み] 画像を引き伸ばすことなく、幅と高さを設定するには？

質問

もし、私が

#logo {
    width: 400px;
    height: 200px;
}

では

<img id="logo" src="logo.jpg"/>

は、そのスペースを埋めるために引き伸ばされます。画像は同じ大きさのまま、DOMでそのスペースを占めるようにしたいのです。カプセル化された <div> または <span> ? スタイリングのためにマークアップを追加するのは嫌だ。

どうすればいいのでしょうか？

はい、あなたはカプセル化されたdivが必要です。

<div id="logo"><img src="logo.jpg"></div>

のようなもので。

#logo { height: 100px; width: 200px; overflow: hidden; }

他の解決策（padding、margin）はより面倒ですが（画像の寸法に基づいて正しい値を計算する必要があるため）、コンテナを画像より小さくすることは効果的に行えません。

また、上記は異なるレイアウトのために、より簡単に適応させることができます。たとえば、画像を右下に配置したい場合。

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }