CSS Responsive Image Tutorial: Hvordan man laver billeder lydhøre med CSS

De fleste af nutidens websteder er lydhøre. Og hvis du har brug for at centrere og justere billedet på dette websted, skal du lære at gøre billeder flydende eller lydhør med CSS.

Jeg sendte en tutorial-video, der forklarer, hvordan man laver et lydhørt websted trin for trin for et par uger siden. I videoen lavede vi et billede lydhør. Men i dette indlæg vil jeg gerne give lidt mere detaljer om, hvordan man får billeder til at reagere.

Du vil også lære nogle af de generelle problemer, der kan opstå, når du prøver at gøre billeder lydhøre - og jeg vil prøve at forklare, hvordan man løser dem.

Sådan får du billeder til at reagere med CSS

Skal jeg bruge relative eller absolutte enheder?

At gøre et billede flydende eller lydhør er faktisk ret simpelt. Når du uploader et billede til dit websted, har det en standardbredde og højde. Du kan ændre dem begge med CSS.

For at gøre et billede lydhørt skal du give en ny værdi til dets breddeegenskab. Derefter justeres billedets højde automatisk.

Det vigtige at vide er, at du altid skal bruge relative enheder til breddeegenskaben som procent, snarere end absolutte som pixels.

img { width: 500px; }

Hvis du f.eks. Definerer en fast bredde på 500 px, reagerer dit billede ikke - fordi enheden er absolut.

img { width: 50%; }

Derfor skal du i stedet tildele en relativ enhed som 50%. Denne tilgang vil gøre dine billeder flydende, og de vil være i stand til at ændre størrelsen på sig selv uanset skærmstørrelse.

Skal jeg bruge medieforespørgsler?

Et af de spørgsmål, jeg får mest, er om du skal bruge medieforespørgsler eller ej.

En medieforespørgsel er et andet vigtigt træk ved CSS, der hjælper med at gøre et websted lydhør. Jeg vil ikke gå i yderligere detaljer her, men du kan læse mit andet indlæg senere for at lære, hvordan du bruger medieforespørgsler mere detaljeret.

Svaret på dette spørgsmål er: "det afhænger". Hvis du vil have dit billede til at have forskellige størrelser fra en enhed til en anden, skal du bruge medieforespørgsler. Ellers vil du ikke.

Nu til dette eksempel har dit billede en bredde på 50% til enhver form for skærm. Men når du vil gøre det i fuld størrelse til mobile enheder, skal du få hjælp fra medieforespørgsler:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Så baseret på medieforespørgselsreglen vil enhver enhed, der er mindre end 480 px, tage den fulde størrelse af skærmens bredde.

Du kan også se videoversionen af ​​dette indlæg nedenfor:

Hvorfor er ejendommen med maks. Bredde ikke stor?

En anden måde, som udviklere kan lave responsive billeder på, er egenskaben max-width. Dette er dog ikke altid den bedste metode at bruge, fordi det muligvis ikke fungerer for enhver form for skærmstørrelse eller enhed.

Den første ting at forstå, før vi går videre med et eksempel, er, hvad nøjagtigheden af ​​max-breddeegenskaben gør.

Egenskaben max-width indstiller en maksimal bredde for et element, hvilket ikke tillader, at bredden af ​​dette element er større end dets max-width-værdi (men det kan være mindre).

Hvis billedet f.eks. Har en standardbredde på 500 pixel, og hvis din skærmstørrelse kun har 360 pixel, kan du ikke se det komplette billede, fordi der ikke er nok plads:

img { max-width: 100%; width: 500px; // assume this is the default size }

Derfor kan du definere en maksimal breddeegenskab for billedet og indstille det til 100%, hvilket krymper billedet på 500 pixel til pladsen på 360 pixel. Så du vil være i stand til at se det komplette billede på en mindre størrelse skærm.

Det gode er, at da du bruger en relativ enhed, vil billedet være flydende i enhver enhed, der er mindre end 500 pixel.

Desværre bliver skærmstørrelsen noget større end 500 px, men billedet bliver ikke, fordi det har en standard 500 px bredde. Denne tilgang vil bryde billedets lydhørhed.

For at løse dette skal du bruge breddeegenskaben igen, hvilket gør ejendommen med maks. Bredde ubrugelig.

Hvad med højder?

Et andet almindeligt problem, du kan løbe over, har at gøre med højdeegenskaben. Normalt ændrer højden på et billede sig selv automatisk, så du ikke behøver at tildele en højdeegenskab til dine billeder (fordi det lidt bryder billedet).

Men i nogle tilfælde skal du muligvis arbejde med billeder, der skal have en fast højde. Så når du tildeler en fast højde til billedet, vil det stadig være lydhørt, men det ser ikke godt ud.

img { width: 100%; height: 300px; }

Heldigvis er der en anden egenskab, som CSS tilbyder for at løse dette problem ...

Løsning: Objektet, der passer til objektet

For at få mere kontrol over dine billeder leverer CSS en anden egenskab kaldet object-fit. Lad os bruge objektet tilpasning af objekt og tildele en værdi, der får dit billede til at se bedre ud:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Hvis det er nødvendigt, kan du også bruge egenskaben objektposition (ud over objekttilpasning) til at fokusere på en bestemt del af billedet. Mange mennesker er ikke opmærksomme på objekttilpasningsejendommen, men det kan være nyttigt at løse denne slags problemer.

Jeg håber, dette indlæg har hjulpet dig med at forstå og løse dine problemer med lydhøre billeder. Hvis du vil lære mere om webudvikling, er du velkommen til at tjekke min Youtube-kanal.

Tak fordi du læste!