如果我有:
#logo { width: 400px; height: 200px; }
然后
<img id="logo" src="logo.jpg"/>
会拉伸以填充该空间。我希望图像保持相同大小,但是要在DOM中占用那么多空间。我是否必须添加封装<div>或<span>?我讨厌添加样式标记。
<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; }