Share
En skarp orsak till att många utvecklare har valt fast bredd över elastiska platser är att använda inlinebilder kan förstöra layouten på en webbplats - ungefär som en stampede av nötkreatur som upprepade gånger sparkar dig i ljumsken. Det är bara inte roligt alls. Visst, du kan ange deras bredder med hjälp av procentandelar eller ems, men dessa metoder är inte idealiska. I sådana fall, varför försök inte använda bakgrundstekniken?
Låt oss först skapa en mycket enkel html-fil.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Växellådan är klar för dig. Namngivna visar en massa convallis vulputate. Alquam ante magna, fermentum nec, scelerisque egen, semper quis, ipsum. Fusce consectetuer är en avgörande faktor. Morbi elit turpis, följaktligen ac, lacinia nec, dignissim ac, velit. Proin mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque hos mi ac magna fermentum elementum.
#container width: 50%; marginal: auto; vaddering: 1em; bakgrund: # 3d332a; färg: # b8ada2; ? #image height: 300px; bakgrund: url (Girl.jpg) no-repeat center;
För att vår container div ska vara flexibel har jag satt bredden till 50% av webbläsarfönstret. Därefter har jag satt marginalerna till auto för att centrera innehållet. Padding, bakgrund och färg är helt enkelt estetisk styling.
Div-märkningen med ett ID för "bild" är där vi lägger till bakgrundsbilden. Nyckeln här är att jag inte sätter en viss bredd på bilden - bara höjden. När du lägger till bilden som en bakgrund, vill du se till att du "centrerar" den (inget upprepa center). Detta kommer i själva verket att tvinga huvudfokusen på din bild att visas hela tiden. * Obs! Se till att du använder en bild som har huvudfokuspunkten i mitten.
Visa ditt arbete i en webbläsare och försök att öka och minska webbläsarfönstret. Det finns några saker att tänka på när du använder den här metoden.
Ha en bra helg. Låt oss träffas här igen måndag! Förresten, var noga med att följa oss på TWITTER!
Accentsconagua