Test CSS Eigenschaft object-fit

fill, contain, cover, none, scale-down

IMG hat width:200px height:100px

none

Mode 1

fill, kein aspect ratio

Mode 2

cover

Mode 3

contain

Mode 4

scale-down

Mode 4

DIV width:100%; height:200px; IMG float:left;width:50%;height:100%;object-fit:cover;
Es sind keine background-images!!!

Was ist es:

  • Funktioniert nur mit height am IMG oder umgebenden DIV
  • Wie background-size doch wirkt es auf das img Element selbst
  • Man bräuchte kein zusätzliches DIV drumrum... oder?
  • img, video
  • Es gibt auch object-position:50% 100%; wäre mittig zentriert wenn angepasst werden muss, 0 100% klebt es am linken Rand, 100% 100% am rechten
  • Kerin Internet-Explorer, erst ab Edge 16