html - 如何在不拉伸(stretch)图像的情况下设置图像的宽度和高度？

Question

如果我有:

#logo {
    width: 400px;
    height: 200px;
}

然后

<img id="logo" src="logo.jpg"/>

将拉伸(stretch)以填充该空间。我希望图像保持相同大小，但要占用 DOM 中的那么多空间。我是否必须添加封装 <div>或 <span> ？我讨厌为样式添加标记。

Answer 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; }