Rezize/Crop av bilder!

[knuhuf]

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 28. juni 2012 av knuhuf

[MikkelRev]

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.

[knuhuf]

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 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. Alt kan jo gjøres med det.

[MikkelRev]

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 29. juni 2012 av MikkelRev

[knuhuf]

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.

[MikkelRev]

Hvorfor sier du at bildet blir skjult om du endrer størrelsen med css? Lest første posten min en gang til takk!

 

<table> skal brukes for tabeller og ikke for layout. En timeplan er et godt eksempel på hva en tabell er for noe. Like greit å unngå dårlige vaner fra begynnelsen av.

[Yawa]

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 29. juni 2012 av Yawa

[MikkelRev]

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

[agm]

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