Se tiver:
#logo {
width: 400px;
height: 200px;
}
então
<img id="logo" src="logo.jpg"/>
irá esticar-se para preencher esse espaço. Quero que a imagem permaneça do mesmo tamanho, mas para ocupar tanto espaço no DOM. Tenho de acrescentar um encapsulamento <div>
ou <span>
? Detesto adicionar uma marcação para o estilo.
Sim, é necessário um mergulho de encapsulamento:
<div id="logo"><img src="logo.jpg"></div>
com algo do género:
#logo { height: 100px; width: 200px; overflow: hidden; }
Outras soluções (acolchoamento, margem) são mais aborrecidas (na medida em que é necessário calcular o valor correcto com base nas dimensões da imagem's) mas também não't permitem efectivamente que o recipiente seja mais pequeno do que a imagem.
Além disso, o acima referido pode ser adaptado muito mais facilmente para diferentes layouts. Por exemplo, se quiser a imagem em baixo, à direita:
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }