- 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".
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
contain : the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
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
scale-down : the content is sized as if none or contain were specified (would result in a smaller concrete object size)
none : the replaced content is not resized
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>
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>
<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>
