如果我有:
#logo {
width: 400px;
height: 200px;
}
然后
<img id="logo" src="logo.jpg"/>
会伸展以填补这一空白.我希望图像保持不变的大小，但要在DOM中占用那么大的空间.我需要加一个封装式的<div>还是<span>？我讨厌为样式添加标记.
如果我有:
#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; }
其他解决方案(填充、边距)更加繁琐(因为您需要根据图像的尺寸计算正确的值)，但也不能有效地允许容器小于图像.
此外，上述内容可以更容易地适应不同的布局.例如，如果希望图像位于右下角:
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }