W3cubDocs

/Support Tables

CSS3 object-fit/object-position

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

Spec https://www.w3.org/TR/css3-images/
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
      73    
    65 72    
    64 71 TP  
11 18 (2) 63 70 12 56
10 17 (2) 62 69 11.1 55
9 16 (2) 61 68 11 54
8 15 60 67 10.1 53
Show all
7 14 59 66 10 52
6 13 58 65 9.1 (1) 51
5.5 12 57 64 9 (1) 50
    56 63 8 (1) 49
    55 62 7.1 (1) 48
    54 61 7 47
    53 60 6.1 46
    52 59 6 45
    51 58 5.1 44
    50 57 5 43
    49 56 4 42
    48 55 3.2 41
    47 54 3.1 40
    46 53   39
    45 52   38
    44 51   37
    43 50   36
    42 49   35
    41 48   34
    40 47   33
    39 46   32
    38 45   31
    37 44   30
    36 43   29
    35 42   28
    34 41   27
    33 40   26
    32 39   25
    31 38   24
    30 37   23
    29 36   22
    28 35   21
    27 34   20
    26 33   19
    25 32   18
    24 31   17
    23 30   16
    22 29   15
    21 28   12.1 (*)
    20 27   12 (*)
    19 26   11.6 (*)
    18 25   11.5 (*)
    17 24   11.1 (*)
    16 23   11 (*)
    15 22   10.6 (*)
    14 21   10.5
    13 20   10.0-10.1
    12 19   9.5-9.6
    11 18   9
    10 17    
    9 16    
    8 15    
    7 14    
    6 13    
    5 12    
    4 11    
    3.6 10    
    3.5 9    
    3 8    
    2 7    
      6    
      5    
      4    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 all (*) 67 10 46 70 63 11 11.8 7.2 1.2 7.12
11.3-11.4   4.4.3-4.4.4 7 12.1 (*)     10   6.2    
11.0-11.2   4.4   12 (*)         5    
10.3   4.2-4.3   11.5 (*)         4    
Show all
10.0-10.2   4.1   11.1 (*)              
9.3 (1)   4   11 (*)              
9.0-9.2 (1)   3   10              
8.1-8.4 (1)   2.3                  
8 (1)   2.2                  
7.0-7.1   2.1                  
6.0-6.1                      
5.0-5.1                      
4.2-4.3                      
4.0-4.1                      
3.2                      

Notes

  1. Partial support in Safari refers to support for object-fit but not object-position.

  2. Partial support in Edge refers to object-fit only supporting <img> (see this comment)

* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=object-fit