以下のものがある場合:
#logo {
width: 400px;
height: 200px;
}
それから
<img id="logo" src="logo.jpg"/>
そのスペースを埋めるために伸びます。画像のサイズはそのままに、DOM でそのくらいのスペースを占めるようにしたいです。カプセル化またはを追加する必要があります<div>か<span>? スタイル設定のためにマークアップを追加するのは嫌いです。
ベストアンサー1
はい、カプセル化する div が必要です:
<div id="logo"><img src="logo.jpg"></div>
次のような内容です:
#logo { height: 100px; width: 200px; overflow: hidden; }
その他のソリューション (パディング、マージン) は、(画像のサイズに基づいて適切な値を計算する必要があるという点で) より面倒ですが、コンテナーを画像よりも小さくすることも事実上できません。
また、上記はさまざまなレイアウトに簡単に適応できます。たとえば、画像を右下に表示したい場合は、次のようになります。
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }