CSS Logo size

[xxll_martin_llxx]

Alright folks,

I've just changed our forums theme - MYBB software - so that it condenses and expands with whatever the users screen resolution is.

I've got a question....
Is this the best way to have it coded:

#logo {	
	height: 100px;
	text-align: center;
	margin: 0;
	padding: 0 15px 10px 15px;
}


.logo {
	width: 100%;
	height: 100px;
	position: center;
	margin-top: 0 px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

<div id="logo">
		<a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" class="logo" /></a></div>

My question is... Is there a way to make the logo a correct size so that it looks ok on all screen resolutions??

http://www.phoenixsupras.net

 

[essellar]

Setting max-width will work to constrain the image size up to a maximum of the image's native resolution; beyond that you probably don't want to scale up anyway. Leave the height out of the CSS, otherwise you'll end up with unwanted distortion if the image isn't displaying at its native resolution (it will stay in proportion if you only state the variable dimension; the other dimension will automatically adjust to suit).

 

[xxll_martin_llxx]

I took the height out. Seems to have done the trick. Thanks.