bassebhuMedlem sedan nov. 20016 480 inlägg Hej!
Jag skulle vilja göra sidans bakgrund (eller en 100% täckande div med bakgrundsbild) skalbar.
Jag vill ha olika bilder som alla har 16:9-format och t.ex. 1920x1080-upplösning. Dessa ska sedan hämtas och skalas upp så att dem antingen blir 100% på höjden eller 100% på bredden beroende på vilka proportioner webbläsarfönstret har. D.v.s. är fönstret 16:9 så visas bilden i sin helhet, annars så beskärs antingen höjden eller bredden. Tanken är hur som helst att bilden ska täcka hela webbläsarfönstret.
Är detta möjligt att göra med bra resultat? jQuery?
Kommer i så fall skalningen att se snygg ut och hur bra är stödet för det hela?
Tack!
Du kan inte göra det med bakgrundsbilder, du kan inte skala dem. Det du får göra är att ha en container (div), och sedan två divar däri, båda med position absolute. Du lägger dem ovanför varandra, den som ska vara bakgrund har sedan en img-tagg i sig. I slutändan så ser det ut som en bakgrundsbild, men du kan skala den som en vanlig img-tagg.. :)
bassebhuMedlem sedan nov. 20016 480 inlägg Allright, men då kan bilden inte beskäras?
Hur blir det med nivåerna då? Om man markerar text i contentdiven, drar man i bilden då eller sätter man olika z-värden?
Du sätter olika z-index, den med texten ligger överst. För att beskära, sätt overflow: hidden på det undre lagret, sedan sätter du valfri storlek på din img samt position: relative. För att "beskära" så behöver du först sätta lämplig slutstorlek på det undre lagret, sedan får du räkna fram hur stor bilden behöver vara, samt positionera den så bara det du vill behålla blir kvar innanför lagrets fyra hörn.
bassebhuMedlem sedan nov. 20016 480 inlägg Okej, tack!
Jag tänker mig ju att man ska kunna rezisa fönstret hur man vill och bilden ska hänga med. Det kommer den ju göra med en <img> med 100%, men hur ska jag lyckas att göra det proportioneligt och att den croppas på höjden resp. bredden beroende på vilka proportioner man har på sitt webbläsarfönster?
