Bevare aspect på billeder med CSS3

[Webn00b]

Hej programmører.

Første spørgsmål som ny bruger, så håber jeg bidrager efter hensigten.

Jeg har et problem med at lære webside-fremstilling, fordi mange eksempler er alt for indforståede, eller avancerede om man vil.
Jeg starter stort set fra bunden, men har samtidig en god ide om, hvor jeg gerne vil hen.

NemProgrammering giver nogle gode basis-eksempler, men alligevel har hver bruger jo sin ide om, hvad han/hun vil ende med.
Jeg har søgt sider op go ned på google, læst mig gennem tonsvis af eksempler, og sågar anskaffet en CSS bog for dummies, der
dog var en ringe investering.

Nu har jeg efterhånden fundet ud af, hvad html5 og CSS3 indebærer, og mit ønske burde kunne løses.

Problem:

Jeg har et billede på 1650x1080px som jeg via stylesheet vil styre i min html5-fil. Jeg ville jo allerhelst have, at billedet altid fyldte hele
baggrunden, men det kan give problemer ved 4:3, når det er 16:10 størrelse. Jeg har stylet en baggrundsfarve, så at der kan ses bjælker,
når formatet ikke passer.
Jeg har prøvet at lave restriktioner med hhv. cover og contain, men det virkede ikke, for jeg får rullebjælker alligevel.
Jeg vil have billedet til at stretche (skalere) uden at ødelægge aspect ratio, og jeg vil bevare bredden mest muligt, og derfor gerne ende
med en top- og bundbjælke, når billedet ses på et 4:3 format. Desuden skal baggrunden altid centrere.

Jeg har skrevet mine parametre ind i stylesheetet som et body-tag med link til billede, baggrundsfarve og et no-repeat.
Kan nogen skrive de parametre, som jeg ellers skal tilføje?

Ultimativt vil jeg gerne skalere med en max-værdi på billedets originale proportioner, men gøres det rigtigt, vil man vel kunne formindske det
helt ned i mobil-tlf. størrelse?

[ThomasI]

Hej og velkommen til!

Som udgangspunkt så er hverken HTML eller CSS lavet til at behandle billeder på den måde. Det betyder at så snart du begynder ændre i billede størrelsen ved hjælp af HTML og CSS så vil billede kvaliteten blive forringet. I CSS3 skulle det som du også beskriver dog være muligt at opnå det du ønsker uden at billede bliver alt for forringet. Har du prøvet at style dit HTML element således i CSS3?:

Kode: Vælg alt

html {
        background: url(ditbillede.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Dette fungerer dog kun i nyere browsere, så hvis dine besøgende ikke er helt opdateret riskerer du at baggrunden ikke bliver vist korrekt. Det kan måske være at du selv bruger en gammel browser og det derfor heller ikke ser ud til at virke hos dig med disse koder...

Problemet med at bruge et rigtigt billede som baggrund er som du beskriver at det er svært at få til at passe til alle skærmstørrelser. Her kunne en anden løsning være at lave et javascript eller php script, som genererer et billede CSS styling der passer til den skærmstørrelse brugerne nu har. På den her måde ville du have forskellige billedestørrelser liggende som ville blive brugt afhængig af skærmstørrelsen hos brugeren. Har ikke lige en færdigt script til dig til dette, men prøv at kig på google og se om du ikke kan finde det derigennem.

Ellers faldt jer over denne artikel:

http://css-tricks.com/perfect-full-page ... und-image/

Der var en del måder hvorpå du kan få det til at virke ( deriblandt en Javascript (jQuery Method ) metode som jeg snakker om ovenfor )... vend endelig tilbage hvis der er noget af det der virker for dig, så andre også måske kan bruge din løsning

[Webn00b]

Tak for svar.

Jeg har set dit forslag andetsteds, men hvor jeg ikke kunne få logik ud af eksemplet.
Dit forslag løste ikke helt mit problem, men det der kom tættest på, skulle skrives sådan her:

body {
background-color: #0297ff;
background-image: url(/images/MitWallpaper.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position-x: center;
background-position-y: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Umiddelbart kunne jeg godt slette baggrundsfarven, for nu vil wallpaperen altid stretche, men da
jeg jo håber, at et geni måske kommer på banen, så lader jeg den være indtil videre.

Jeg forstår godt din forklaring med billede-problemet, når man resizer.
Jeg er dog ikke helt enig i, at resize altid forringer, for hvis aspektet holdes, så vil en downsizing ikke
påvirke kvaliteten.
Derfor havde jeg jo håbet, at jeg kunne få bjælker i top og bund, men det nærmeste jeg kommer det,
er hvis billedet er fikseret i toppen (standard), for så bliver bjælken i bunden bare større og større,
jo mere man skrumper billedet i bredden.

Så med mindre jeg får et godt tip til en løsning, så må jeg nøjes med ovenstående kode.
Det giver så den udfordring, at man skal sigte efter billeder, der ikke kræver det rette aspekt for bedste
fremvisning.
Troede helt ærligt at CSS3 havde en løsning til mig. :S

[Daniel]

Hej Webn00b.

For det første så velkommen herinde på NemProgrammering.dk.

Jeg kan desværre ikke hjælpe dig med dit problem bedre end hvad Thomas kan gøre det, personligt så bruger jeg selv kun billedbehandlingsprogrammer til at lave om på mine billeder da det uanset hvad giver den bedste kvalitet.
Selv bruger jeg Adobe Photoshop CS5 da det er klart det bedste at sidde og arbejde med hvis man bruger det meget.
Hvis du dog ikke lige vil gå ud og ofre så mange tusind kroner på et billedbehandlingsprogram så kan jeg klart anbefale dig Gimp http://www.gimp.org/ som er et gratis program, eller min personlige gratis favorit PhotoFiltre http://www.photofiltre.com/. PhotoFiltre er også oversat til dansk og derfor et nemt og dejligt program at arbejde til hvis man foretrækker dansk frem for engelsk (sprogversion kan hentes nede af siden).

Så vil jeg også gerne høre hvorfor det lige et CSS3 du leder efter i dette tilfælde?
Jeg ved ikke hvor meget du er inde i programmering lige nu men CSS3 er et meget farligt stof at bruge hvis man ikke er godt inde i programmering/marketing. Problemet med CSS3 er at det kun er installeret på de nyeste browsere og derfor hvis man ønsker at have en befolkningsgruppe inde på sin side som er 40+ så vil jeg på ingen måde anbefale at bruge CSS3, har man et ønske om at det er den yngre generation end de 40+ så kan man begynde at lave nogle ting, men helst så lidt som muligt (grunden til at jeg siger 40+ nej og under der ja det er fordi det viser sig at de fleste der når de 40 år ikke længere opdatere deres browsere, og derved er der ikke ret mange der kan se den fine CSS3 kode, og så kan det komme til at se ud som en pløjemark i stedet på end hjemmeside).

Jeg ved selvfølgelig ikke med dig om du har det på den måde jeg beskriver herunder, men sådan som siden her skal forstås med deres guides så bliver der ikke lavet ret mange guides hvor man siger at det skal bruges til noget bestemt, der er nogle tilfælde som login og det inden for PHP kategorien men ellers så er der kun nogle eksempler til hvad det kan bruges til, og det er det som jeg syntes gør denne side meget bedre end nogen anden.
Man kan flette stort set alle de guides sammen som ligger herinde og lave nogle kæmpe projekter, et lille eksempel til det er f.eks. en lommeregner jeg lavede på et tidspunkt, hvor jeg sat disse videoer sammen http://www.nemprogrammering.dk/Tutorials/PHP/T2PHP.php , http://www.nemprogrammering.dk/Tutorials/PHP/T10PHP.php og http://www.nemprogrammering.dk/Tutorials/PHP/T11PHP.php. Da jeg så havde sat dem sammen til at lave en lille simpel lommeregner så virkede den ikke da den lavede min variabler om til tekststrenge, og her var jeg så rigtig glad for nettet da jeg nemt og hurtigt fandt en løsning på problemet igennem den vej, men hele meningen med det jeg fortæller her er bare at man kan sætte det sammen efter sin fantasi, hvis man gør det kan man faktisk lave nogle ret store ting ud af nogle små simple ting.

Jeg håber at dette forklarede en lille smule.

Mvh. Danielh007 - Moderator på NemProgrammering.dk Forum

[Webn00b]

Jeg har udelukkende satset på css3, fordi jeg er helt blank på webprogrammering.
Sidst hvor jeg lavede hjemmesider, foregik det i Frontpage, som jeg slet ikke var så
utilfreds med, selv om mange skældte ud over programmet.

Allerede dengang var det et mareridt at styre sin side med tabeller, og derfor lød css
med stylesheet styring interessant.

html5 hørte jeg om i "So ein ding", og så måtte det også lige researches.

Nogle af de fedeste sider jeg har set, har været skrevet i flash, men der er jo også problemer,
så jeg har bare tolket, at css3 og html5 var en combo, som var værd at satse på.

Min største skuffelse var købet af "css for dummies" for den var bare en stor rodebunke af
bittesmå kodeeksempler, der ikke var forklaret ordentligt, og hvor man springer rundt i måden
man bruger links, div tags osv.

Dummies=total nybegynder i min verden, så jeg skulle jo kunne lære af den uden forhåndsviden.

Jeg har da tænkt mig, at jeg skal have noget læsestof om css3, og jeg vil også gerne lære,
hvordan man laver ting, der styres med SQL, og så ser det også ud som om man tit kan lave
små tricks med java.