Övningen att genomföra responsiva bilder är fortfarande i sin linda. Vi har sett många idéer och förslag på hur det ska ske och vi är tvungna att se mycket mer.
Idag ska vi titta på en fascinerande liten ram som gör det möjligt att inte bara automatiskt ändra storlek på dina bilder när visningsporten ändras, men också beskära bilderna med en viss viktig kontaktpunkt i åtanke. Otroligt nog gör det allt detta med ren CSS. Läs vidare för att se hur det fungerar.
Möt brännpunkten
Focal Point är ett GitHub-projekt och en CSS-ram skapad av Adam Bradley. Som du vet, kräver konceptet med responsiva bilder att alla bilder på din sida ändrar storlek och återflöde för att uppnå optimal layout för den aktuella visningsportstorleken. Brännpunkten tar den här idén ytterligare ett steg och ändrar inte bara dina bilder, utan grödar dem också.
Problemet med den här tanken är förstås att om du vederbörligen skördar en bild, kan du klippa ut den viktigaste delen av bilden! Till exempel, i bilden ovan, är ämnet på höger sida av bilden. Hur hindrar vi henne från att beskäras?
Lyckligtvis tillåter Focal Point att du anger ett riktat område av bilden för att behålla (kontaktpunkten). På det här sättet, när ramverket grödar din bild, kommer det att göra så på ett sätt som säkerställer att din bild fortfarande ser bra ut.
Hur fungerar det?
Genomförande av fokuspunkt är en ganska unik process, men det är ganska enkelt. Först ska vi prata om den allmänna processen som används för att välja en kontaktpunkt, då dyker vi in i koden.
När du lägger in en bild i din webbsida med hjälp av Focal Point delas den automatiskt upp i ett osynligt 12? 12 rutnät. Det spelar ingen roll vad bildens dimensioner är, nätet anpassar sig till vad du behöver.
Nu när vi vet hur bilden delas upp måste vi bestämma oss för en viss plats i det nätet som ska fungera som vår fokuspunkt. Vad det här betyder är att den punkt som vi väljer kommer att fungera som ett centralt område där skörden kommer att hända. Så om vi väljer människans ansikte, kan vi se till att de viktiga aspekterna av detta foto upprätthålls.
Processen här är att hitta ansiktet, räkna sedan rutenheter från centrum. I detta fall är hans ansikte tre enheter rätt och tre enheter upp från mitten av gallret.
Koden
Nu när vi har vår fokusering i åtanke är det dags att planera vår kod. För att börja, se till att du laddar ner projektet från GitHub och länk den medföljande CSS-filen till ditt HTML-dokument.
När du är klar, är det dags att ställa in två divider och en bildtagg. Jo, det vet jag, det är en hel del markering för en enda bild och definitivt en enorm nackdel för att använda denna ram. Här är den grundläggande uppmärkningen:
Enkelt nog rätt? Låt oss nu lägga till i en rubrik och ett stycke bara för ett visst generellt sidinnehåll.
Därefter kasta i bilden precis som vi gjorde ovan med hjälp av? Right-3? och? up-3? klasser och två divs.
Se den i aktion
Nu när vår demo är uppbyggd, låt oss ta en titt. Om vi tittar på sidan på en stationär eller bärbar dator ser vi att bilderna automatiskt har anpassat sig till vår kolumnstorlek och visar hela bildområdet.
demo: Klicka här för att starta.
Nu om vi antingen begränsar vår fönsterstorlek eller byter till en mobilenhet, kan vi se bilderna anpassa sig perfekt. När vi blir mindre och mindre, sätter en mediasökning in och plötsligt är bilderna inte bara mindre, men beskurna.
Ur ett designperspektiv, hur cool är det !? Ju mindre en bild blir desto lättare är det för det som en gång var en stor, framträdande kontaktpunkt att bli en liten speck. Med denna ram kan du se till att tittare på små enheter fortfarande får högupplösta bilder.
Webbläsarkompatibilitet
Detta borde fungera bra i alla större moderna webbläsare. För IE8 kommer bilderna att ändras korrekt, de kommer helt enkelt inte att skära sig. Detta är verkligen inte världens ände eftersom 99,99% av webbplatser på webben inte har denna automatisk beskärningsfunktionalitet ändå!
Cool, men hur fungerar det?
Nu vet vi att Focal Point fungerar, men det är viktigt att veta på vilket sätt det fungerar.På så sätt om du vill tweak vad som händer eller gör något liknande utan ramverket, kommer du att kunna utan problem.
Den första delen av koden är en grundläggande CSS-bara responsiv bildlösning. Det skulle vara bra att säkerhetskopiera detta med några JavaScript, men det är en bra start. Som du kan se, utnyttjar det 100% bredd, 100% maxbredd och automatisk höjd för att fungera sin magi.
Vad händer nästa är lite mer komplicerat. Först implementeras en grundläggande mediefråga vid 767px. Då, för att få grödan att hända, används några negativa marginaler för var och en av de möjliga klasserna. Jag har städat upp den här koden för att bara inkludera? Up-3? och? right-3? klasser som vi använde ovan.
Som du kan se finns det verkligen inte mycket kod på jobbet här, men det är en ganska knepig bit av CSS. Negativa marginaler används med em-enheter för att beskära bilden i förhållande till en viss punkt. Allvarliga kudos till Adam Bradley för att tänka på denna smarta teknik!
Vad tror du?
Nu när du har sett vad Focal Point gör och hur det fungerar, är det dags för din tidsklocka och låt mig veta vad du tycker. Skulle du använda detta i ett projekt? Varför eller varför inte? Hur skulle du göra det ännu bättre?
Även om du har sett några andra bra responsiva bildverktyg, tekniker eller ramar, lämna en länk och jag ska kolla in dem.