Avatar billede Bims Novice
10. december 2019 - 17:31 Der er 10 kommentarer

Responsive billede

Hej

Nogen der ved hvorledes man laver et responsive baggrundsbillede
et billeder som fylder 100% width og er 529px højt?
Avatar billede Slater Ekspert
10. december 2019 - 18:15 #1
background-size: 100%;

Så kan du selv bestemme højden med height.
Avatar billede Slater Ekspert
10. december 2019 - 18:17 #2
- Og når du sætter en fast højde på, så ønsker du nok også
background-position: center;
Avatar billede Bims Novice
10. december 2019 - 18:35 #3
Ved godt det er meget af bede om, men har du et helt eks. på css koden dertil.
Synes det driller mig noget:-)
Avatar billede Slater Ekspert
10. december 2019 - 18:38 #4
Avatar billede Bims Novice
10. december 2019 - 18:51 #5
tak, men billedet bliver ikke responsive... eks www.sorenbuhrkal.dk/test.php
Avatar billede Slater Ekspert
10. december 2019 - 18:54 #6
Beklager, jeg glemte det vigtigste af det hele, background-size:

http://snip.kilolima.dk/#/wpu1Xr6
Avatar billede Bims Novice
10. december 2019 - 18:57 #7
ja, det havde jeg sat ind :-), men prøv engang at gøre browseren mindre. Så får man pludselig flere billeder.
Avatar billede Slater Ekspert
10. december 2019 - 19:06 #8
Ah, du mener i højden? Ja, det sker fordi du har en fast højde. Det kan du fjerne det ved at tilføje
background-repeat: no-repeat;
- men top og bund bliver naturligvis så baggrundsfarven i stedet, eftersom den faste højde skal fyldes ud med noget.
Avatar billede Slater Ekspert
10. december 2019 - 19:08 #9
Alternativt kan du udskifte background-size: 100%; med background-size: cover;
Det kan virke bedre i mange situationer, men der bliver jo så skåret noget af den anden vej i stedet, hvilket kan være uønsket.
Avatar billede Bims Novice
10. december 2019 - 19:21 #10
okay....kommer lige tilbage i morgen.
Men mange tak ind til videre:-)
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