Avatar billede kurdo Novice
13. juli 2016 - 10:56 Der er 8 kommentarer

Gør billede mindre når browseren bliver mindre

Hvordan laver man denne effekt med et billede der er 100% bredden og højden bliver mindre og mindre jo mere vi gør skærmen mindre? Her er ideen jo så det ikke skal fylde 2000px på en iphone/iPad.


ligesom denne side:

http://bellroy.com
Avatar billede cht22 Professor
13. juli 2016 - 11:10 #1
<img src=billede.jpg style="max-width:100%;">
Avatar billede Slater Ekspert
13. juli 2016 - 11:11 #2
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.
Avatar billede kurdo Novice
13. juli 2016 - 11:22 #3
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.
Avatar billede cht22 Professor
13. juli 2016 - 11:37 #4
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.
Avatar billede Slater Ekspert
13. juli 2016 - 12:25 #5
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.
Avatar billede kurdo Novice
13. juli 2016 - 16:27 #6
@slater Hvad gør den side jeg linker til så? det er det jeg vil vide. :)
Avatar billede Slater Ekspert
13. juli 2016 - 16:37 #7
#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.
Avatar billede Zochko Juniormester
14. juli 2016 - 21:20 #8
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.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester