Avatar billede xcover Nybegynder
04. februar 2009 - 19:38 Der er 3 kommentarer og
1 løsning

Crop et billed

Hej,

Jeg her fundet lidt CSS kode til at "croppe" i et billed, men kan det ikke gøres mere dynamisk ?

Jeg har et billede som skal vises i en bredde på 400 pixel - MEN jeg vil altså kun se 40 i højden - dette resultat vil normalt kun vise toppen af billedet hvis overflow=hidden. Jeg vil bare se den midterst del af billedet

Svært at forklare, se min kode - og kom MEGET gerne med en bedre løsning :)

Altså med CSS...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>

<style type="text/css" media="screen">
div.crop {
height: 60px;
width: 400px;
overflow: hidden;
}
div.crop img {
margin: -100px;
}
</style>

</head>

<body>

<div class="crop">
<img src="http://www.supercars.dk/cars/supercars/audi-s8-wallpapers.jpg" width="600" class="crop" alt="Paper Sculpture Large">
</div>

</html>
Avatar billede nicklasb Nybegynder
04. februar 2009 - 19:50 #1
Ændre

div.crop img {
    margin: -100px;
}


til

div.crop img {
    margin: -50%;
}

Men det er generelt ikke særlig kønt at lade brugeren hente hele billedet, for kun at vise en del af det, hvis ikke det er fodi du forventer at brugeren alligevel skal se resten af billedet. Da ville det nok være kønnere at lade serveren klippe billedet til og kun sende den del brugeren skal se.
Avatar billede olebole Juniormester
04. februar 2009 - 22:16 #2
<ole>

Det bliver ikke kønnere at croppe billedet, før det bliver downloaded - men billedet vil fylde mindre  =)

/mvh
</bole>
Avatar billede nicklasb Nybegynder
05. februar 2009 - 08:57 #3
Jeg tænkte nu også mest på løsningen i det hele taget - altså at det bliver en kønnere løsning :)
Brugeren vil også få et bedre indtryk, når siden ikke er så tung. Større filer = længere loadtid.

Men det er ganske korrekt at det endelige resultat ikke er forskelligt. Skulle billedet også skaleres (for eksempel med width: 80%;) er jeg dog sikker på at et serverside script kan gøre det pænere end de fleste browsere gør det.
Avatar billede olebole Juniormester
05. februar 2009 - 09:19 #4
Jamen, så er vi jo helt enige  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester