如果我有:
#logo {
width: 400px;
height: 200px;
}
然后
<img id="logo" src="logo.jpg"/>
将拉伸(stretch)以填充该空间。我希望图像保持相同大小,但要占用 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; }
关于html - 如何在不拉伸(stretch)图像的情况下设置图像的宽度和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1733006/