Gør billede mindre når browseren bliver mindre

<img src=billede.jpg style="max-width:100%;">

Det kommer an på, om det er et baggrundsbillede eller et <img>

I dette tilfælde er det et <img> - så sætter du bare width: 100% i CSS, og eventuelt max-width til billedets naturlige størrelse, hvis du ikke vil have det skalerer op og bliver sløret på meget store opløsninger.

sorry hvis jeg ikke var tydelig nok i min forklaring, men det er ikke bredden der er problemet men mere højden. hvis i gør browseren større/mindre så vil højden blive mindre og mindre. altså width er fast mens height er dynamisk.

Så forstår jeg ikke hvad det er du mener.

På den side du henviser til bliver der jo også brugt forskellige billeder afhængig af bredden på browseren.

Hvis bredden skal være fast, mens højden skal variere, så får du jo et strukket billede. Det er heller ikke hvad den side du linker til gør.

@slater Hvad gør den side jeg linker til så? det er det jeg vil vide. :)

#6: Den gør bare som jeg sagde: width: 100%

Højden af billedet skalerer automatisk ned, så billedet ikke bliver strukket, så længe billedet ikke har fået tildelt en fast højde.

På denne side er der så også sat noget specielt op, der skifter til et helt andet billede, når den kommer ned på mobilstørrelse. Men det er en helt anden ting.

Siden du referere til benytter sig af "Bootstrap frameworket"
http://getbootstrap.com/

Det de gør er at udskifte billedet alt efter hvilken skærm hjemmesiden bliver vist på, ved at bruge bootstrap's smarte col system.
reference = http://getbootstrap.com/css/#grid-options

De udskifter så billedet alt efter skærmstørrelse:

Hvis du trykker f12 i chrome og kigger på ressource manageren, kan du se der er billeder til forskellige skærmstørrelser:

Default størrelse "1440x635"
http://images3.bellroy.com/assets/home/bellroy_homepage_mainbanner_default_1440x635px-c864adbf93feb6e11c7afb1d7897e345075af926ada7657bb1953d4604003943.jpg

Mobil størrelse "640x985"
http://images2.bellroy.com/assets/home/bellroy_homepage_mainbanner_default_640x985px-2e688311be2d1464ddfd78f24e47b07027ecd5650ba72f28d483ae2fb0cf11f3.jpg

Samtidig med at klassen "img-responsive"
reference = http://getbootstrap.com/css/#images
Bliver sat på billedet.

Og wupti så har du den ønskede effekt.

Hvis du ønsker at gøre dette helt selv, skal du bruge css @media
reference = http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hvor du validere skørmstørrelsen og gemmer de div's som indeholder billedet alt efter hvad det er for en skærm størrelse.
Og sætter max-heigt - max-width på selve billederne alt efter om det er til mobil eller PC.