CSS Logo size

Messages
740
Reaction score
1
Points
18
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:

Code:
#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;
}

Code:
<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
 
Last edited:

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
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).
 
Top