- is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
Assume your <img> has a fixed width and height (or is constrained by a container). object-fit determines how the image scales and fills that space.
fill : this is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit. Rarely used; causes distortion.
contain : the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. Used for thumbnails where full image must be visible.
cover : the replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit. Most comm usage - ideal for hero images, crds.
scale-down : the content is sized as if none or contain were specified (would result in a smaller concrete object size). Niche use
none : the replaced content is not resized. Rarely used.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
JavaScript syntax: object.style.objectFit="cover"
example: object-fit property
object-fit: cover:
Cut off the sides of an image, preserving the aspect ratio, and also filling in the space:
Original image:
code:
<div>
<h4>object-fit: cover:</h4>
<p>Cut off the sides of an image, preserving the aspect ratio, and also filling in the space:</p>
<img class="a" src="../../pics/1.jpg" alt="sailing" width="400" height="300">
<h4>Original image:</h4>
<img src="../../pics/1.jpg" alt="sailing" width="400" height="300">
</div>
<style>
img.a {width: 15vw; height: 20vw; object-fit: cover;}
</style>
- is used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its "own content box". Only affects "object-fit: cover" or "contain".
position : specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
Resize the image to fit its content box, and position the image 0.3vw from the left and 20% from the top inside the content box:
Original image:
code:
<div>
<p>Resize the image to fit its content box, and position the image 0.3vw from the left and 20% from the top inside the content box:</p>
<img class="b" src="../../pics/4.jpg" alt="sailing" width="400" height="300">
<h4>Original image:</h4>
<img src="../../pics/4.jpg" alt="sailing" width="400" height="300">
</div>
<style>
img.b {width: 20vw; height: 30vw; object-fit: none; object-position: 0.3vw 20%; border: 0.5vw solid red}
</style>
