{"id":194885,"date":"2015-02-03T09:12:46","date_gmt":"2015-02-03T16:12:46","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=194885"},"modified":"2021-05-24T07:27:30","modified_gmt":"2021-05-24T14:27:30","slug":"object-position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","title":{"rendered":"object-position"},"content":{"rendered":"\n<p>The CSS property <code>object-position<\/code> is used to align any selected replaced element (e.g., an <code>&lt;img&gt;<\/code>) within the box that contains it.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">img {\n  object-position: right bottom;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=520%2C300&#038;ssl=1\" alt=\"\" class=\"wp-image-336309\" width=\"520\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?w=1040&amp;ssl=1 1040w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=300%2C173&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=1024%2C591&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=768%2C443&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=1000%2C577&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>An <code>&lt;img&gt;<\/code> element will align to bottom-right edge of its parent container with <code>object-position: right bottom;<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>While it\u2019s probably most common to see <code>object-position<\/code> used on <code>&lt;img&gt;<\/code> elements, it can be used on other types of replaced elements, like <code>&lt;iframe&gt;<\/code>, <code>&lt;video&gt;<\/code>, and <code>&lt;embed&gt;<\/code>.<\/p>\n\n\n\n<p><code>object-position<\/code> is part of the <a href=\"https:\/\/www.w3.org\/TR\/css-images-3\/#the-object-position\" rel=\"noopener\">CSS Images Module Level 3<\/a> specification.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">object-position: &lt;position>where &lt;position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | &lt;length-percentage> ] [ top | center | bottom | &lt;length-percentage> ]? | [ [ left | right ] &lt;length-percentage> ] &amp;&amp; [ [ top | bottom ] &lt;length-percentage> ] ]where &lt;length-percentage> = &lt;length> | &lt;percentage><\/code><\/pre>\n\n\n\n<p>That\u2019s just a <em>really<\/em> long way of explaining that we can use keywords or length values to set an element\u2019s alignment within a container.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Positional values *\/\nobject-position: 50% 50%; \/* default position *\/\nobject-position: right bottom;\nobject-position: 20px 95px;\nobject-position: center 20px; \/* mix and match *\/\nobject-position: 60% top; \/* mix and match *\/\n\n\/* Global values *\/\nobject-position: inherit;\nobject-position: initial;\nobject-position: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-examples\">Examples<\/h3>\n\n\n<p>Let\u2019s look at a few different examples of the <code>object-position<\/code> property at work.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-basic-usage\">Basic usage<\/h4>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLarwxX\" src=\"\/\/codepen.io\/anon\/embed\/yLarwxX?height=550&amp;theme-id=1&amp;slug-hash=yLarwxX&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLarwxX\" title=\"CodePen Embed yLarwxX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<details >\n  <summary>\n          Details      <\/summary>\n  \n\n<p>The example above demonstrates on how <code>object-position<\/code> aligns an image element relative to its parent container when the image is smaller than the parent container. Again, note the use of <code>object-fit: none<\/code> in there to make <code>object-position<\/code> work.<\/p>\n\n\n<\/details>\n\n<h4 class=\"wp-block-heading\" id=\"h-image-exceeds-the-container\">Image exceeds the container<\/h4>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fc10e83f982c65e5551b06e4605e6a7b\" src=\"\/\/codepen.io\/anon\/embed\/fc10e83f982c65e5551b06e4605e6a7b?height=550&amp;theme-id=1&amp;slug-hash=fc10e83f982c65e5551b06e4605e6a7b&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fc10e83f982c65e5551b06e4605e6a7b\" title=\"CodePen Embed fc10e83f982c65e5551b06e4605e6a7b\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<details >\n  <summary>\n          Details      <\/summary>\n  \n\n<p>This demo demonstrates how an image element that is larger than its parent container behaves with different <code>object-position<\/code> values.<\/p>\n\n\n<\/details>\n\n<h4 class=\"wp-block-heading\" id=\"h-other-types-of-replaced-content\">Other types of replaced content<\/h4>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_5eebb54cab757029bdab50499c04d7cb\" src=\"\/\/codepen.io\/anon\/embed\/5eebb54cab757029bdab50499c04d7cb?height=700&amp;theme-id=1&amp;slug-hash=5eebb54cab757029bdab50499c04d7cb&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 5eebb54cab757029bdab50499c04d7cb\" title=\"CodePen Embed 5eebb54cab757029bdab50499c04d7cb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<details >\n  <summary>\n          Details      <\/summary>\n  \n\n<p>This example shows <code>object-position<\/code> used with other types of replaced content, including <code>&lt;video&gt;<\/code> and <code>&lt;iframe&gt;<\/code>.<\/p>\n\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"h-tricks\">Tricks!<\/h3>\n\n\n<details >\n  <summary>\n          Responsive image crop      <\/summary>\n  \n\n<p>The example below has a basic responsive layout with image above text. Perhaps the man in this image is the subject of the article, and as the screen size gets smaller, we want to maintain focus on that subject. <code>object-position<\/code> is used here to maintain that focus, cropping the image at a particular break point with <code>object-position: left bottom<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYomWdE\" src=\"\/\/codepen.io\/anon\/embed\/zYomWdE?height=700&amp;theme-id=1&amp;slug-hash=zYomWdE&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYomWdE\" title=\"CodePen Embed zYomWdE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Mosaic faces      <\/summary>\n  \n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdOLZde\" src=\"\/\/codepen.io\/anon\/embed\/mdOLZde?height=450&amp;theme-id=1&amp;slug-hash=mdOLZde&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdOLZde\" title=\"CodePen Embed mdOLZde\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Outside of positional focus, <code>object-position<\/code>\u2019s practical uses are limited. However, it is a property you can get somewhat creative with when it comes to page layout and design.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Stylized borders      <\/summary>\n  \n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwoyXwZ\" src=\"\/\/codepen.io\/anon\/embed\/RwoyXwZ?height=450&amp;theme-id=1&amp;slug-hash=RwoyXwZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwoyXwZ\" title=\"CodePen Embed RwoyXwZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Another cool thing we can do is use the negative space of the parent container to draw fake borders. We set a background color on the parent container, drop in an image that&#8217;s smaller than the container, then use <code>object-position<\/code> to align the image. What&#8217;s left sorta looks like a border. It gets super interesting when we start putting many containers together because it looks as though a line is drawn between them, which can make neat patterns.<\/p>\n\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=\u201dobject-fit\u201d\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">32<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4.3-4.4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-194885\">\n\n  <time datetime=\"2016-02-19\" title=\"Originally published Feb 3, 2015\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 19, 2016  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/on-object-fit-and-object-position\/\">\n      A Quick Overview of `object-fit` and `object-position`    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-194885\">\n\n  <time datetime=\"2015-02-02\" title=\"Originally published Feb 3, 2015\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 1, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-fit\/\">\n      object-fit    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-fit\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.cover { object-fit: cover; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The CSS property object-position is used to align any selected replaced element (e.g., an &lt;img&gt;) within the box that contains it.<\/p>\n","protected":false},"author":281118,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":194850,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-fit\/","url_meta":{"origin":194885,"position":0},"title":"object-fit","date":"February 2, 2015","format":false,"excerpt":"The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14132,"url":"https:\/\/css-tricks.com\/almanac\/properties\/v\/vertical-align\/","url_meta":{"origin":194885,"position":1},"title":"vertical-align","date":"September 6, 2011","format":false,"excerpt":"The vertical-align property in CSS controls how elements set next to each other on a line are lined up. img { vertical-align: middle; } In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set\u2026","rel":"","context":"In \"vertical-align\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3262,"url":"https:\/\/css-tricks.com\/snippets\/css\/meyer-reset\/","url_meta":{"origin":194885,"position":2},"title":"Meyer Reset","date":"August 6, 2009","format":false,"excerpt":"html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196146,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-position\/","url_meta":{"origin":194885,"position":3},"title":"background-position","date":"February 17, 2015","format":false,"excerpt":"The background-position property in CSS allows you to move a background image (or gradient) around within its container. html { background-position: 100px 5px; } It has three different types of values: Length values (e.g. 100px 5px)Percentages (e.g. 100% 5%)Keywords (e.g. top right) The default values are 0 0. This places\u2026","rel":"","context":"In \"background\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3856,"url":"https:\/\/css-tricks.com\/snippets\/css\/absolute-center-vertical-horizontal-an-image\/","url_meta":{"origin":194885,"position":4},"title":"Absolute Center (Vertical &#038; Horizontal) an Image","date":"September 4, 2009","format":false,"excerpt":"CSS background-image Technique: html { width:100%; height:100%; background:url(logo.png) center center no-repeat; } CSS + Inline Image Technique: img { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; margin-top: -250px; \/* Half the height *\/ margin-left: -250px; \/* Half the width *\/ } Table technique: html, body, #wrapper {\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":179172,"url":"https:\/\/css-tricks.com\/lodge\/svg\/08-using-svg-iframeobjectembed\/","url_meta":{"origin":194885,"position":5},"title":"08: Using SVG: iframe\/object\/embed","date":"August 15, 2014","format":false,"excerpt":"Forgive me if I'm a bit down on these methods. I've never come across a use case where they are definitely the way to go. There was a time when was the only way to use SVG, but those days are over. See the Pen AmEdC by Chris Coyier (@chriscoyier)\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194885"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281118"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=194885"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194885\/revisions"}],"predecessor-version":[{"id":341271,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/194885\/revisions\/341271"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=194885"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=194885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}