Gå til innhold

Rezize/Crop av bilder!


Anbefalte innlegg

Hei :)

 

Har en side der jeg har disse rammene 200*240px, der det skal være bilder inni. Som et profilbilde... Dette kan gjøres veldig enkelt med HTML, men da blir jo ikkje bilde direkte mindre, bare delvis skjult. Så lurer på om det er en måte å få bildene forminsket til den størrelsen jeg vil ha, uten at dette skal ete opp laste tiden til nettsida.

 

Tenker dette kan gjøres da brukeren laster opp bilde, men hvordan??!

Endret av knuhuf
Lenke til kommentar
Videoannonse
Annonse

Bildet blir ikke delvis skjult hvis du bruker css til å sette størrelsen. Isåfall har du bare en liten logisk feil i CSS-koden din. Eksperimenter med width, height, og min- og max- width og height.

 

Hvis du vil fysisk endre bildestørrelsen eller croppe det, må du bruke serverscripting. Om du bruker PHP kan du sjekke ut GD eller ImageMagick.

Lenke til kommentar

Bildet blir ikke delvis skjult hvis du bruker css til å sette størrelsen. Isåfall har du bare en liten logisk feil i CSS-koden din. Eksperimenter med width, height, og min- og max- width og height.

 

Hvis du vil fysisk endre bildestørrelsen eller croppe det, må du bruke serverscripting. Om du bruker PHP kan du sjekke ut GD eller ImageMagick.

 

Skrev HTML, ikke CSS :p Da mener jeg width og height i selve HTML tag'en. Hmm, ja kan se litt på PHP, men er veldig opptatt av å gjøre alt selv, uten bruk av en masse opensource scripts. Litt kan brukes, men vil gjøre mest selv, da jeg har lyst å jobbe me dette fremtiden og dermed lære både HTML, PHP, CSS og Javascript. Viss det blir for kronglete å gjøre det selv, så skal jeg se litt på GD eller ImageMagick. ;)

 

Takk, for hjelpen. Fint å vite at det kan gjøres med PHP. :hmm: Alt kan jo gjøres med det.

Lenke til kommentar

En tommelfingerregel til deg: Du skal aldri bruke width og height i HTML, det har gått ut på dato. Bruk alltid CSS for det!

 

Du gjør jo ting selv når du koder i PHP da. GD og ImageMagick er grafikk-biblioteker man kan bruke i PHP. Jeg kan vedde en sokk på at det ikke er for høynivå (hvis du vet hva det betyr) for deg.

 

I dette tilfelle, og på ditt nivå, så er løsningen på ditt problem definitivt CSS. Ikke PHP.

Endret av MikkelRev
Lenke til kommentar

Legger meg flat. Jeg tok ikkje tiden til å studere GD og ImageMagick og legger meg flat ettersom jeg har fått vite at det bare er et bibliotek. Skal se på de ;)

 

Vet at man ikkje bør velge width og height i HTML, og det gjør selvfølgelig ikke. Men både i HTML og i CSS så blir vell det ikke avskjert, men skjult. P.S bruker kun CSS til styling.

 

Men du... Er det gale av meg å velge tables framfor div's i ENKELTE tilfeller. Lagte login form og fant ut at tables var lettest til dette. Bruker derimot divs mye mer.

Lenke til kommentar

i noen eldre nettlesere må høyde og bredde settes på bildeelementer for at de skal bli vist (hvis ikke fremstår de som kollapset)...

I tilfeller hvor bilder kan ha varierte høyder/bredder kan det bli krevende å sette disse størrelseforholdene i css hvis man skal unngå inline rot, eller?

 

Uansett så kjører jeg bildene gjennom en php-bildefunksjon so jeg har satt opp, som henter ut dimmensjonenen slik at jeg ikke trenger å bekymre meg for dette...

 

I bunn å grunn bør du optimalisere bildene så godt som mulig. Ikke anbefalt å manipulere dimmensjonene på bilde da filen i sin helhet fortsatt må lastes ned til klientens maskin...

Endret av Yawa
Lenke til kommentar

I tilfeller hvor bilder kan ha varierte høyder/bredder kan det bli krevende å sette disse størrelseforholdene i css hvis man skal unngå inline rot, eller?

 

Du kan beholde proporsjonaliteten lett ved å sette enten width eller height istedetfor ikke begge deler.

 

Enig med Mikkel. I noen tilfeller kan det være greit å sette enten width eller height, og så sette den andre tilbake til auto for å hindre at tidligere satt str kicker inn. Skal opprettholde strforholdet greit!

 

img {
width: 200px;
height: auto;
}

 

 

 

 

i noen eldre nettlesere må høyde og bredde settes på bildeelementer for at de skal bli vist (hvis ikke fremstår de som kollapset)...

 

Vi må vel helt tilbake til veteranbrowsere som Netscape Navigator og IE 4 for å reprodusere disse problemene? I mine øyne ikke lengre et problem.

 

 

 

 

Ikke anbefalt å manipulere dimmensjonene på bilde da filen i sin helhet fortsatt må lastes ned til klientens maskin

 

Enig :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...