Tilpassing av profilbilde

[barentshavet]

God formiddag!

 

Jeg skal prøve å gi en god forklaring på dette, men det viste seg å være vanskelig. I alle fall: når brukere laster opp bildet blir det lastet opp i de aktuelle pikslene (for eksempel 400x200.) Jeg ønsker gjennom CSS at bildet blir delvis skalert slik at man for eksempel får mer av midtpunktet av bildet i profilbilderuten (for eksempel hvis bildet er 500 piksler i høyden). Både Twitter og Facebook gjør dette med sine profilbilder.

 

Jeg ønsker ikke at bildet faktisk blir skalert, men som beskrevet over. Noen om har noen gode ideer for hvordan dette kan gjøres? Tusen takk på forhånd!

 

Eksempel: det lille bildet er skalert til midtpunktet. Det store er originalen.

 

Endret 22. oktober 2012 av winter2012

[Djn]

Noe sånt som "crop til kvadratisk, og så skaler ned til en gitt størrelse"?

Cropping i CSS er tydeligvis ikke helt trivielt - ref dette . Reskalering i css er lett (height og width), men jeg vet ikke hva slags interaksjoner det har med crop-teknikkene. Det er uansett veldig mulig du må herje litt i javascript for å få ting til å gå opp.

 

Uansett - husk at ved å gjøre det på denne måten må du fortsatt sende hele bildet til brukeren. Ville det ikke vært penere (og enklere) å gjøre det på serversiden?

Endret 22. oktober 2012 av Djn

[agm]

CSS har gode muligheter for å tilpasse bakgrunnsbilder. Mine to forslag er å 1) enten sette bakgrunnsbildet direkte via CSS, eller 2) legge bildet inn som et eget element, og sette dette som bakgrunnsbilde via Javascript.

 

Trikset er uansett å bruke background-size: cover. Godt støttet i nyere nettlesere, men dessverre ikke bakoverkompatibelt med IE7-8.

 

Håper det kan hjelpe deg på vei!