What is the position of an object?

Here we see HTML that includes two <img> elements, each displaying the MDN logo.

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" /> <img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

CSS

The CSS includes default styling for the <img> element itself, as well as separate styles for each of the two images.

img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; }

The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

Result

In order to continue enjoying our site, we ask that you confirm your identity as a human. Thank you very much for your cooperation.