{"id":51872,"date":"2026-10-17T13:57:21","date_gmt":"2026-10-17T10:27:21","guid":{"rendered":"https:\/\/8899.ir\/web\/?p=51872"},"modified":"2026-10-17T13:57:21","modified_gmt":"2026-10-17T10:27:21","slug":"stp-web-20261016-object-fit-en","status":"publish","type":"post","link":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/","title":{"rendered":"Fit images into a frame with CSS without distortion"},"content":{"rendered":"<div class=\"stpweb_20261016-education\" lang=\"en\" dir=\"ltr\" style=\"direction:ltr;text-align:left;background:#05080d;color:#eef4fa;font-family:Tahoma,Arial,sans-serif;line-height:2;padding:clamp(12px,3vw,24px);border-radius:18px;overflow-wrap:anywhere\">\n<h2 style=\"color:#f4c44e\">Fit images into a frame with CSS without distortion<\/h2>\n<div style=\"background:#0b1119;color:#eef4fa;padding:18px;border-radius:14px\">\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Forcing width and height independently can stretch faces and objects.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">The object-fit property controls how an image sits inside its frame.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">For a test, create a full-width frame with a height of 240px.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Apply width:100%, height:100%, and object-fit:cover to the image.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Cover fills the frame but may crop some image edges.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">If showing the entire image matters more, try object-fit:contain.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Use object-position to move the important subject toward the center or another side.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Test the pattern with landscape, portrait, and square images.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">At mobile width, confirm that the main subject has not been cropped away.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">This property does not affect iframes; use it for images or video.<\/p>\n<hr>\n<h3 style=\"color:#f4c44e\">Official sources<\/h3>\n<ul>\n<li><a style=\"color:#70d9ff\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/object-fit\" target=\"_blank\" rel=\"noopener noreferrer\">MDN \u2014 object-fit<\/a><\/li>\n<li><a style=\"color:#70d9ff\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/object-position\" target=\"_blank\" rel=\"noopener noreferrer\">MDN \u2014 object-position<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Fit images into a frame with CSS without distortion Forcing width and height independently can stretch faces and objects. The object-fit property controls how an image sits inside its frame. For a test, create a full-width frame with a height of 240px. Apply width:100%, height:100%, and object-fit:cover to the image. Cover fills the frame but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":51873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-51872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-edu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fit images into a frame with CSS without distortion - web design &amp; Host domain provider<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fit images into a frame with CSS without distortion - web design &amp; Host domain provider\" \/>\n<meta property=\"og:description\" content=\"Fit images into a frame with CSS without distortion Forcing width and height independently can stretch faces and objects. The object-fit property controls how an image sits inside its frame. For a test, create a full-width frame with a height of 240px. Apply width:100%, height:100%, and object-fit:cover to the image. Cover fills the frame but [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/\" \/>\n<meta property=\"og:site_name\" content=\"web design &amp; Host domain provider\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-17T10:27:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 \u062f\u0642\u06cc\u0642\u0647\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\"},\"headline\":\"Fit images into a frame with CSS without distortion\",\"datePublished\":\"2026-10-17T10:27:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/\"},\"wordCount\":133,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\"},\"image\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp\",\"articleSection\":[\"edu\"],\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/\",\"name\":\"Fit images into a frame with CSS without distortion - web design &amp; Host domain provider\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp\",\"datePublished\":\"2026-10-17T10:27:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#primaryimage\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp\",\"contentUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp\",\"width\":800,\"height\":600,\"caption\":\"Fit images into a frame with CSS without distortion\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261016-object-fit-en\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/8899.ir\\\/web\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fit images into a frame with CSS without distortion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#website\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/\",\"name\":\"www.8899.ir\",\"description\":\"siamak khanjani personal web site Web design hezarehno company\",\"publisher\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/8899.ir\\\/web\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fa-IR\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/5834774893835260090.jpg\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/5834774893835260090.jpg\",\"contentUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/5834774893835260090.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/5834774893835260090.jpg\"},\"sameAs\":[\"https:\\\/\\\/8899.ir\\\/web\",\"htpps:\\\/\\\/instagram.com\\\/siamakkhanjaniir\",\"https:\\\/\\\/www.linkdin.com\\\/in\\\/siamakkhanjani-ir\"],\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fit images into a frame with CSS without distortion - web design &amp; Host domain provider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/","og_locale":"fa_IR","og_type":"article","og_title":"Fit images into a frame with CSS without distortion - web design &amp; Host domain provider","og_description":"Fit images into a frame with CSS without distortion Forcing width and height independently can stretch faces and objects. The object-fit property controls how an image sits inside its frame. For a test, create a full-width frame with a height of 240px. Apply width:100%, height:100%, and object-fit:cover to the image. Cover fills the frame but [&hellip;]","og_url":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/","og_site_name":"web design &amp; Host domain provider","article_published_time":"2026-10-17T10:27:21+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp","type":"image\/webp"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0646\u0648\u0634\u062a\u0647\u200c\u0634\u062f\u0647 \u0628\u062f\u0633\u062a":"admin","\u0632\u0645\u0627\u0646 \u062a\u0642\u0631\u06cc\u0628\u06cc \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646":"1 \u062f\u0642\u06cc\u0642\u0647"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#article","isPartOf":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/"},"author":{"name":"admin","@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba"},"headline":"Fit images into a frame with CSS without distortion","datePublished":"2026-10-17T10:27:21+00:00","mainEntityOfPage":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/"},"wordCount":133,"commentCount":0,"publisher":{"@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba"},"image":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#primaryimage"},"thumbnailUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp","articleSection":["edu"],"inLanguage":"fa-IR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/","url":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/","name":"Fit images into a frame with CSS without distortion - web design &amp; Host domain provider","isPartOf":{"@id":"https:\/\/8899.ir\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#primaryimage"},"image":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#primaryimage"},"thumbnailUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp","datePublished":"2026-10-17T10:27:21+00:00","breadcrumb":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/"]}]},{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#primaryimage","url":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp","contentUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261016-cf8fdd1f382e4c45-object-fit-en.webp","width":800,"height":600,"caption":"Fit images into a frame with CSS without distortion"},{"@type":"BreadcrumbList","@id":"https:\/\/8899.ir\/web\/stp-web-20261016-object-fit-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/8899.ir\/web\/"},{"@type":"ListItem","position":2,"name":"Fit images into a frame with CSS without distortion"}]},{"@type":"WebSite","@id":"https:\/\/8899.ir\/web\/#website","url":"https:\/\/8899.ir\/web\/","name":"www.8899.ir","description":"siamak khanjani personal web site Web design hezarehno company","publisher":{"@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/8899.ir\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fa-IR"},{"@type":["Person","Organization"],"@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba","name":"admin","image":{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/09\/5834774893835260090.jpg","url":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/09\/5834774893835260090.jpg","contentUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/09\/5834774893835260090.jpg","width":1024,"height":1024,"caption":"admin"},"logo":{"@id":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/09\/5834774893835260090.jpg"},"sameAs":["https:\/\/8899.ir\/web","htpps:\/\/instagram.com\/siamakkhanjaniir","https:\/\/www.linkdin.com\/in\/siamakkhanjani-ir"],"url":"https:\/\/8899.ir\/web\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts\/51872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/comments?post=51872"}],"version-history":[{"count":1,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts\/51872\/revisions"}],"predecessor-version":[{"id":51874,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts\/51872\/revisions\/51874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/media\/51873"}],"wp:attachment":[{"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/media?parent=51872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/categories?post=51872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/tags?post=51872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}