如果我有:
#logo {
width: 400px;
height: 200px;
}
then
<img id="logo" src="logo.jpg"/>
将拉伸以填充该空间。我希望图像保持相同的大小,但它会在 DOM 中占用那么多空间。我是否必须添加封装<div>
or <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; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)