Objekts - CSS-triki

Anonim

Par object-fitīpašuma nosaka, kā elements reaģē uz augstumu un platumu tās satura kastes. Tas ir paredzēts attēliem, videoklipiem un citiem iegultiem multivides formātiem kopā ar object-positionīpašumu. Izmanto pats, object-fitļauj mums apgriezt iekšējo attēlu, dodot mums precīzu kontroli pār to, kā tas šūpojas un stiepjas kastes iekšpusē.

object-fit var iestatīt ar vienu no šīm piecām vērtībām:

  • fill: tā ir noklusējuma vērtība, kas izstiepj attēlu, lai tas atbilstu satura lodziņam, neatkarīgi no tā proporcijas.
  • contain: palielina vai samazina attēla izmēru, lai aizpildītu lodziņu, vienlaikus saglabājot tā proporcijas.
  • cover: attēls aizpildīs lodziņa augstumu un platumu, vēlreiz saglabājot tā malu attiecību, bet procesa laikā bieži apgriežot attēlu.
  • none: attēls ignorēs vecāku augstumu un platumu un saglabās sākotnējo izmēru.
  • scale-down: attēlā tiks salīdzināta atšķirība starp noneun contain, lai atrastu mazāko konkrētā objekta izmēru.

Mēs varam iestatīt šo īpašumu šādi:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Tā kā otrajam attēlam ir malu attiecība, kas atšķiras no sākotnējā attēla kreisajā pusē, tas izstiepsies ārpus tā satura lodziņa, apgriežot attēla augšējo un apakšējo daļu.

Ir vērts atzīmēt, ka pēc noklusējuma attēls ir centrēts tā satura lodziņā, taču to var mainīt ar object-positionīpašumu.

Demonstrācija

Zemāk redzamajā demonstrācijā ir parādīti pieci piemēri, kuros sīki aprakstīts, kā mēs varētu vēlēties, lai attēls sagrieztos satura lodziņā, kas dažreiz ir mazāks vai lielāks par sākotnējo platumu (mainiet pārlūka izmēru, lai labāk izprastu, kā tas varētu darboties):

Skatiet Robin Rendle (@robinrendle) Pen-object-fit vietnē CodePen.

Ja attēla saturs kāda iemesla dēļ neaizpilda satura lodziņu, neaizpildītajā vietā tiks parādīts elementa fons, šajā gadījumā gaiši pelēks fons.

Pārlūkprogrammas atbalsts

Ir vērts atzīmēt, ka iOS 8-9.3 un Safari 7-9.1 object-fitīpašums, bet ne object-position.

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
32 36 Nē 79 10

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 4.4.3–4.4.4 10.0-10.2