CSS3 Object Fit

Next ❯CSS3 Flexbox

Used to set the appearance of an image or a video element

  • turned_in_notMedia Query property
    • object-fit
    • object-position

object-fit

It sets the appearance of an image or a video inside a specific size

object-fit:
img {
  height: 210px;
  width: 310px;
  object-fit:fill;
}
object-fitsubject
object-fitclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 210px;
  width: 310px;
  object-fit:fill;
  background:#a4f3d8;
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>


object-position

It sets the position of an image or a video inside a specific size

  • Used with object-fit property
object-position:
img {
  height: 210px;
  width: 310px;
  object-fit:none;
/*object-position:x-axis y-axis;*/
  object-position:center center;
}
object-positionsubject
object-positionclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 210px;
  width: 310px;
  object-fit:none;
  /*object-position:x-axis y-axis;*/
  object-position:center center;
  background:#a4f3d8;
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

  • CSS3 Flexbox
❮ Prev Clip Path
Next ❯CSS3 Flexbox
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯