CSS Object-fit Generator

Generate CSS object-fit and object-position properties with live preview

Settings

Image URL

object-fit

object-position (Preset)

Position X: 50%

Position Y: 50%

CSS Output

img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}

fill: Stretches to fill (default)

contain: Scales to fit within bounds

cover: Scales to cover entire area

none: Original size

scale-down: Smaller of none or contain