Justere bildestørrelsemed css

[kongen]

Hvordan kan jeg justere bildene til å passe i bilde-div? Div er 100px bred og høy. Bildene har forskjellige størrelser. Bildene skal justeres til 100px bred, men hvis bilde da blir mindre enn 100px høy, så skal høyden være 100px og bredden kuttes ned til 100px bred. Jeg har denne koden men den trykker bildene sammen slik at bildene ser rare ut.

<div class="bilde"><img src="bilde.jpg" /></div>

.bilde{
width:100px;
height:100px;
overflow:hidden;
}

.bilde img {
min-height:100%;
min-width:100px;
width:100%;
height:auto;
position:relative;
}

 

[Camillafr]

.bilde img {
width: 100%;
max-height: 100px;
}

Det ser ut til å være nok hos meg.

Edit: Forresten, det fungerte ikke med stående bilder.
Om bildet skal være 100px uansett, så må det jo enten kuttes i høyden eller så må det trykkes sammen litt.

Setter du:

.bilde img {
max-width: 100px;
max-height: 100px;}

Så vil det værtfall uansett passe innen for div'en.

 

[spikre]

sett max-width og max-height - wolla. (obs: fungerer ikke på eldre versjoner av IE)

 

[kongen]

Det fugerer ikke, bilde fyller ikke ut hele div.

Hvis et bilde f.eks. er 200px bred og 100px høy så skal hele høyden og 100px av bredden vises i div. Resterende 100px av bredden skal skjules. Bilde skal ikke nedskaleres slik at bilde fyller 100px bredde og 50px høyde.

Hvis et bilde er 100px bred og 200px høy så skal hele bredden og 100px av høyden vises.

 

[impel]

Du kan bruke background-size i CSS, men da ikke med en <img>

.bilde {
  background-image: url('dittbilde.jpg');
  background-size: cover;
  width: 100px;
  height: 100px
}

Bruker du "cover" vil bildet dekke hele boksen på 100x100px. Du kan også bruke "contain", men da får du noe ala det de andre her har foreslått, da hele bildet prøver å få plass inni boksen, uten klipping.

 

[kongen]

Dette funger i Firefox, men ikke i ie8 eller på mobil. Hvilken kode brukte de i "gamledager" som fungerte i ie?

 

[impel]

Ofte forhåndsklipping på serveren, så servere klippede varianter direkte derfra. Så hvis du må støtte "alt" av nettlesere, er vel det veien å gå fremdeles.

Men background-size skal fungere fint på mobil. Og IE8 har rett i overkant av 4% markedsandel på verdensbasis. Er det ikke snart på tide å ignorere disse gamle, utdaterte nettleserne?

Can I use... Support tables for HTML5, CSS3, etc

 

[adeneo]

Det er mulig jeg misforstår helt, men det du har bør vel strengt tatt virke, men elementer har ingen gitt høyde og bredde når de er statiske, altså så lenge position er "static", så vil ikke height og width ha noen betydning, og heller ikke overflow, du må sett position til noe annet først, for eksempel relative.

Dersom du ikke vil skalere bildene med mindre de har bredde eller høyde som er mindre enn oppgitt, så bruker du helt riktig min-width og min-height, og for å kutte av overflødig så bruker du overflow hidden i containeren, men da må du sette en position.

Her er et eksempel

Edit fiddle - JSFiddle

 

[kongen]

Men background-size skal fungere fint på mobil. Og IE8 har rett i overkant av 4% markedsandel på verdensbasis. Er det ikke snart på tide å ignorere disse gamle, utdaterte nettleserne?

Hadde gammel Android på mobilen jeg sjekket. Ønsker også å inkludere IE8. IE8-brukere klikker også på annonser

Det er mulig jeg misforstår helt, men det du har bør vel strengt tatt virke, men elementer har ingen gitt høyde og bredde når de er statiske, altså så lenge position er "static", så vil ikke height og width ha noen betydning, og heller ikke overflow, du må sett position til noe annet først, for eksempel relative.

Dersom du ikke vil skalere bildene med mindre de har bredde eller høyde som er mindre enn oppgitt, så bruker du helt riktig min-width og min-height, og for å kutte av overflødig så bruker du overflow hidden i containeren, men da må du sette en position.

Her er et eksempel

Edit fiddle - JSFiddle

Det ser ut til at dette virker med at den kutter nedre og høyre del av bilde

Hva hvis bilde er 200px bred og 400px høy, hvordan kan man samtidig skalere ned bilde til 100px bred og 200px høy for så å kutte bort den nedre delen av bilde. Slik som background-size: cover; fungerer men med en css som funker overalt?

 

[adeneo]

Det finnes ingen mulighet for det i CSS som jeg kommer på som er støttet i IE8.

Du kan sette bredden til 100px og la høyden justeres automatisk, eller omvendt, sette høyden og la bredden justeres automatisk, men du kan ikke gjøre begge deler automatisk ut i fra hvilken vei bildet er lengst, da må du enten bruke "cover", eller for eldre nettlesere, javascript.

Husker jeg ikke feil er CSS clip støttet i IE8, men jeg kan ikke helt se noen måte å bruke det på heller for å få til slik automatisk aspect ratio greier, det blir ofte gjort med javascript i stedet.

 

[hansson]

.bilde{
width:100px;
height:100px;
overflow:hidden;
}

.bilde img {
width:100%;
}

Funker ikke det over alt?