Responsywny obrazek w css

Dla specjalistów Webmastering
#1

Witam, proszę o pomoc w ostylowaniu obrazka w nagłówku tak aby zmniejszał się pod daną rozdzielczość

<header id="header">
	
			<div class="top_logo">
			  <img src="images/new_logo.png" alt="obrazek"/> 
			</div>

	</header>

obrazek jest 500px na 130px

w stylach zrobiłem tak:

#header {
	width:1100px;
	height:auto;
}

.top_logo {
	width:100%;
	height:130px;
	margin-bottom: 4px;
}

#top_logo img{
	max-width: 100%;
	height:auto;
	width:auto;
    padding-left:20px;
}

 

#2

Chyba miało być  “.top_logo  img” zamist “#top_logo  img”

#header masz na 1100px, więc dostosuje się do 1100px. Chyba, że #header będziesz dawał w @media dla różnych szerokości.

#3

Ustaw

width: 100%;
max-width: 500px;

obrazkowi. Obierze 100% dostępnej szerokości, jednak nie przekroczy maksymalnej. Height możesz pominąć, dostosuje się proporcjonalnie.