{"id":51927,"date":"2026-10-17T13:59:37","date_gmt":"2026-10-17T10:29:37","guid":{"rendered":"https:\/\/8899.ir\/web\/?p=51927"},"modified":"2026-10-17T13:59:37","modified_gmt":"2026-10-17T10:29:37","slug":"stp-web-20261017-ratio-en","status":"publish","type":"post","link":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/","title":{"rendered":"Create a responsive image frame with CSS aspect-ratio"},"content":{"rendered":"<div class=\"stpweb_20261017-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\">Create a responsive image frame with CSS aspect-ratio<\/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\">The aspect-ratio property preserves a frame\u2019s width-to-height ratio as it resizes.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Create a test section with width:100% and aspect-ratio:16\/9.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Place an image inside and set its width and height to 100%.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Apply object-fit:cover so it fills the frame without stretching.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">If edge cropping is unsuitable, try contain and accept the empty space.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Test 1\/1 for a square card and 4\/3 for a conventional image.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Avoid an unnecessary fixed height so the ratio can control the frame.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">View the example at widths of 320, 768, and 1200 pixels.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">Make sure the main subject is not cropped out on mobile.<\/p>\n<p class=\"stpweb-line\" style=\"color:#eef4fa;margin:0 0 12px\">The result is correct when the frame keeps one ratio and the image never stretches.<\/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\/aspect-ratio\" target=\"_blank\" rel=\"noopener noreferrer\">MDN \u2014 aspect-ratio<\/a><\/li>\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<\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Create a responsive image frame with CSS aspect-ratio The aspect-ratio property preserves a frame\u2019s width-to-height ratio as it resizes. Create a test section with width:100% and aspect-ratio:16\/9. Place an image inside and set its width and height to 100%. Apply object-fit:cover so it fills the frame without stretching. If edge cropping is unsuitable, try contain [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":51928,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-51927","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>Create a responsive image frame with CSS aspect-ratio - 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-20261017-ratio-en\/\" \/>\n<meta property=\"og:locale\" content=\"fa_IR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a responsive image frame with CSS aspect-ratio - web design &amp; Host domain provider\" \/>\n<meta property=\"og:description\" content=\"Create a responsive image frame with CSS aspect-ratio The aspect-ratio property preserves a frame\u2019s width-to-height ratio as it resizes. Create a test section with width:100% and aspect-ratio:16\/9. Place an image inside and set its width and height to 100%. Apply object-fit:cover so it fills the frame without stretching. If edge cropping is unsuitable, try contain [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/\" \/>\n<meta property=\"og:site_name\" content=\"web design &amp; Host domain provider\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-17T10:29:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-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-20261017-ratio-en\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\"},\"headline\":\"Create a responsive image frame with CSS aspect-ratio\",\"datePublished\":\"2026-10-17T10:29:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/\"},\"wordCount\":131,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#\\\/schema\\\/person\\\/5cf790b25f5efb06e6132813f46d29ba\"},\"image\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp\",\"articleSection\":[\"edu\"],\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/\",\"name\":\"Create a responsive image frame with CSS aspect-ratio - web design &amp; Host domain provider\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp\",\"datePublished\":\"2026-10-17T10:29:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#breadcrumb\"},\"inLanguage\":\"fa-IR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fa-IR\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#primaryimage\",\"url\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp\",\"contentUrl\":\"https:\\\/\\\/8899.ir\\\/web\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp\",\"width\":800,\"height\":600,\"caption\":\"Create a responsive image frame with CSS aspect-ratio\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/8899.ir\\\/web\\\/stp-web-20261017-ratio-en\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/8899.ir\\\/web\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a responsive image frame with CSS aspect-ratio\"}]},{\"@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":"Create a responsive image frame with CSS aspect-ratio - 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-20261017-ratio-en\/","og_locale":"fa_IR","og_type":"article","og_title":"Create a responsive image frame with CSS aspect-ratio - web design &amp; Host domain provider","og_description":"Create a responsive image frame with CSS aspect-ratio The aspect-ratio property preserves a frame\u2019s width-to-height ratio as it resizes. Create a test section with width:100% and aspect-ratio:16\/9. Place an image inside and set its width and height to 100%. Apply object-fit:cover so it fills the frame without stretching. If edge cropping is unsuitable, try contain [&hellip;]","og_url":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/","og_site_name":"web design &amp; Host domain provider","article_published_time":"2026-10-17T10:29:37+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-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-20261017-ratio-en\/#article","isPartOf":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/"},"author":{"name":"admin","@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba"},"headline":"Create a responsive image frame with CSS aspect-ratio","datePublished":"2026-10-17T10:29:37+00:00","mainEntityOfPage":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/"},"wordCount":131,"commentCount":0,"publisher":{"@id":"https:\/\/8899.ir\/web\/#\/schema\/person\/5cf790b25f5efb06e6132813f46d29ba"},"image":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#primaryimage"},"thumbnailUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp","articleSection":["edu"],"inLanguage":"fa-IR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/","url":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/","name":"Create a responsive image frame with CSS aspect-ratio - web design &amp; Host domain provider","isPartOf":{"@id":"https:\/\/8899.ir\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#primaryimage"},"image":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#primaryimage"},"thumbnailUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp","datePublished":"2026-10-17T10:29:37+00:00","breadcrumb":{"@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#breadcrumb"},"inLanguage":"fa-IR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/"]}]},{"@type":"ImageObject","inLanguage":"fa-IR","@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#primaryimage","url":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp","contentUrl":"https:\/\/8899.ir\/web\/wp-content\/uploads\/2026\/10\/stpweb_20261017-340891a21e7bd4b0-ratio-en.webp","width":800,"height":600,"caption":"Create a responsive image frame with CSS aspect-ratio"},{"@type":"BreadcrumbList","@id":"https:\/\/8899.ir\/web\/stp-web-20261017-ratio-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/8899.ir\/web\/"},{"@type":"ListItem","position":2,"name":"Create a responsive image frame with CSS aspect-ratio"}]},{"@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\/51927","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=51927"}],"version-history":[{"count":1,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts\/51927\/revisions"}],"predecessor-version":[{"id":51929,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/posts\/51927\/revisions\/51929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/media\/51928"}],"wp:attachment":[{"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/media?parent=51927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/categories?post=51927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/8899.ir\/web\/wp-json\/wp\/v2\/tags?post=51927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}