{"id":43748,"date":"2025-09-24T16:25:46","date_gmt":"2025-09-24T13:25:46","guid":{"rendered":"https:\/\/goit.global\/?p=43748"},"modified":"2026-01-06T11:45:00","modified_gmt":"2026-01-06T09:45:00","slug":"property-object-fit","status":"publish","type":"post","link":"https:\/\/goit.global\/ua\/glossary\/css\/object-fit\/","title":{"rendered":"object-fit"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\"><strong>object-fit<\/strong><\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c object-fit \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454, \u044f\u043a \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0430\u0431\u043e \u0432\u0456\u0434\u0435\u043e \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0454\u0442\u044c\u0441\u044f \u0447\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412\u043e\u043d\u0430 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e\u0432\u0430\u0442\u0438, \u0447\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0457, \u043e\u0431\u0440\u0456\u0437\u0430\u0454\u0442\u044c\u0441\u044f \u0430\u0431\u043e \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0454\u0442\u044c\u0441\u044f, \u0449\u043e\u0431 \u0437\u0430\u043f\u043e\u0432\u043d\u0438\u0442\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. object-fit \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e \u043a\u043e\u0440\u0438\u0441\u043d\u0430 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u0456\u0432 \u0442\u0430 \u0433\u0430\u043b\u0435\u0440\u0435\u0439.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0406\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n\n<section id=\"glossary-examplesblock_3d5ac0f3ce211facf6c62d1a4912e238\" class=\"gb-glossary-examples- glossary-examples\">\n\t\n\t\t<div class=\"demo-container\">\n\t\t\t<div class=\"demo-content\">\n\t\t\t\t<div class=\"controls-panel\">\n\t\t\t\t\t<div class=\"control-group\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option active\"\n\t\t\t\t\t\t\t\tonclick=\"setExample(0)\" data-rule=\"object-fit: fill;\">\n\t\t\t\t\t\t\t\tobject-fit: fill;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(1)\" data-rule=\"object-fit: contain;\">\n\t\t\t\t\t\t\t\tobject-fit: contain;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(2)\" data-rule=\"object-fit: cover;\">\n\t\t\t\t\t\t\t\tobject-fit: cover;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(3)\" data-rule=\"object-fit: none;\">\n\t\t\t\t\t\t\t\tobject-fit: none;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button class=\"control-option \"\n\t\t\t\t\t\t\t\tonclick=\"setExample(4)\" data-rule=\"object-fit: scale-down;\">\n\t\t\t\t\t\t\t\tobject-fit: scale-down;\t\t\t\t\t\t\t\t<span class=\"copy-feedback\">\u0421\u043a\u043e\u043f\u0456\u0439\u043e\u0432\u0430\u043d\u043e!<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"preview-panel\">\n\t\t\t\t\t<div class=\"preview-container parent\"\n\t\t\t\t\t\tstyle=\"\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"preview\" id=\"previewImage\">\n\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/web-dev-goit.s3.eu-north-1.amazonaws.com\/app\/uploads\/2025\/09\/24151451\/dog.webp\">\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t<!-- text under example boxes \/ applies for all types -->\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<script>\n\t\t\tconst examples = [{\"title\":\"object-fit: fill;\",\"additional_urls\":false,\"additional_rules\":false},{\"title\":\"object-fit: contain;\",\"additional_urls\":[{\"url\":{\"ID\":43731,\"id\":43731,\"title\":\"stars\",\"filename\":\"stars-1.webp\",\"filesize\":13482,\"url\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1.webp\",\"link\":\"https:\\\/\\\/goit.global\\\/ua\\\/glossary\\\/css\\\/background-image\\\/attachment\\\/stars-2\\\/\",\"alt\":\"\\u0421\\u0438\\u043d\\u0456 \\u0437\\u0456\\u0440\\u043a\\u0438\",\"author\":\"53\",\"description\":\"\",\"caption\":\"\",\"name\":\"stars-2\",\"status\":\"inherit\",\"uploaded_to\":43705,\"date\":\"2025-09-24 12:41:13\",\"modified\":\"2025-09-24 12:41:23\",\"menu_order\":0,\"mime_type\":\"image\\\/webp\",\"type\":\"image\",\"subtype\":\"webp\",\"icon\":\"https:\\\/\\\/goit.global\\\/wp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":500,\"height\":500,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1-150x150.webp\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1-300x300.webp\",\"medium-width\":300,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1.webp\",\"medium_large-width\":500,\"medium_large-height\":500,\"large\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1.webp\",\"large-width\":500,\"large-height\":500,\"1536x1536\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1.webp\",\"1536x1536-width\":500,\"1536x1536-height\":500,\"2048x2048\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24154113\\\/stars-1.webp\",\"2048x2048-width\":500,\"2048x2048-height\":500}}},{\"url\":false}],\"additional_rules\":false},{\"title\":\"object-fit: cover;\",\"additional_urls\":false,\"additional_rules\":false},{\"title\":\"object-fit: none;\",\"additional_urls\":false,\"additional_rules\":false},{\"title\":\"object-fit: scale-down;\",\"additional_urls\":false,\"additional_rules\":false}];\n\t\t\tconst type = \"pic\";\n\t\t\tconst additionalRules = [{\"rule\":\"width: 100%;\"},{\"rule\":\"height: 100%\"}];\n\t\t\tconst parentRules = false;\n\t\t\tconst childRules = false;\n\t\t\tconst contentImage = {\"ID\":43695,\"id\":43695,\"title\":\"dog\",\"filename\":\"dog.webp\",\"filesize\":35366,\"url\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog.webp\",\"link\":\"https:\\\/\\\/goit.global\\\/ua\\\/glossary\\\/css\\\/background-size\\\/attachment\\\/dog\\\/\",\"alt\":\"\\u0429\\u0430\\u0441\\u043b\\u0438\\u0432\\u0435 \\u0449\\u0435\\u043d\\u044f\",\"author\":\"53\",\"description\":\"\",\"caption\":\"\",\"name\":\"dog\",\"status\":\"inherit\",\"uploaded_to\":43693,\"date\":\"2025-09-24 12:14:51\",\"modified\":\"2025-09-24 12:15:16\",\"menu_order\":0,\"mime_type\":\"image\\\/webp\",\"type\":\"image\",\"subtype\":\"webp\",\"icon\":\"https:\\\/\\\/goit.global\\\/wp\\\/wp-includes\\\/images\\\/media\\\/default.png\",\"width\":600,\"height\":600,\"sizes\":{\"thumbnail\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog-150x150.webp\",\"thumbnail-width\":150,\"thumbnail-height\":150,\"medium\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog-300x300.webp\",\"medium-width\":300,\"medium-height\":300,\"medium_large\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog.webp\",\"medium_large-width\":600,\"medium_large-height\":600,\"large\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog.webp\",\"large-width\":600,\"large-height\":600,\"1536x1536\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog.webp\",\"1536x1536-width\":600,\"1536x1536-height\":600,\"2048x2048\":\"https:\\\/\\\/web-dev-goit.s3.eu-north-1.amazonaws.com\\\/app\\\/uploads\\\/2025\\\/09\\\/24151451\\\/dog.webp\",\"2048x2048-width\":600,\"2048x2048-height\":600}};\n\n\t\t\tlet currentIndex = 0;\n\n\t\t\tfunction copyToClipboard(text, button) {\n\t\t\t\t\/\/ Try using the modern clipboard API first\n\t\t\t\tif (navigator.clipboard && navigator.clipboard.writeText) {\n\t\t\t\t\tnavigator.clipboard.writeText(text).then(() => {\n\t\t\t\t\t\tshowCopyFeedback(button);\n\t\t\t\t\t}).catch(() => {\n\t\t\t\t\t\t\/\/ Fallback for older browsers\n\t\t\t\t\t\tfallbackCopyToClipboard(text, button);\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\t\/\/ Fallback for older browsers\n\t\t\t\t\tfallbackCopyToClipboard(text, button);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction fallbackCopyToClipboard(text, button) {\n\t\t\t\tconst textArea = document.createElement('textarea');\n\t\t\t\ttextArea.value = text;\n\t\t\t\ttextArea.style.position = 'fixed';\n\t\t\t\ttextArea.style.left = '-999999px';\n\t\t\t\ttextArea.style.top = '-999999px';\n\t\t\t\tdocument.body.appendChild(textArea);\n\t\t\t\ttextArea.focus();\n\t\t\t\ttextArea.select();\n\n\t\t\t\ttry {\n\t\t\t\t\tdocument.execCommand('copy');\n\t\t\t\t\tshowCopyFeedback(button);\n\t\t\t\t} catch (err) {\n\t\t\t\t\tconsole.error('Failed to copy text: ', err);\n\t\t\t\t}\n\n\t\t\t\tdocument.body.removeChild(textArea);\n\t\t\t}\n\n\t\t\tfunction showCopyFeedback(button) {\n\t\t\t\t\/\/ Add copied class for visual feedback\n\t\t\t\tbutton.classList.add('copied');\n\n\t\t\t\t\/\/ Show copy feedback\n\t\t\t\tconst feedback = button.querySelector('.copy-feedback');\n\t\t\t\tfeedback.classList.add('show');\n\n\t\t\t\t\/\/ Remove feedback after 1.5 seconds\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tfeedback.classList.remove('show');\n\t\t\t\t\tbutton.classList.remove('copied');\n\t\t\t\t}, 1500);\n\t\t\t}\n\n\t\t\tfunction buildBackgroundImages(item) {\n\t\t\t\t\/\/ Build background images for the current example\n\t\t\t\tlet backgroundImages = [`url('${contentImage.url}')`];\n\n\t\t\t\tif (item.additional_urls && Array.isArray(item.additional_urls)) {\n\t\t\t\t\titem.additional_urls.forEach(urlObj => {\n\t\t\t\t\t\tif (urlObj.url && urlObj.url.url) {\n\t\t\t\t\t\t\tbackgroundImages.push(`url('${urlObj.url.url}')`);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn backgroundImages.join(', ');\n\t\t\t}\n\n\t\t\tfunction setExample(index, shouldCopy = true) {\n\t\t\t\tconst item = examples[index];\n\t\t\t\tcurrentIndex = index;\n\t\t\t\tlet activeChildIndex = 0;\n\n\t\t\t\t\/\/ Reset all preview elements to their base styles\n\t\t\t\tresetPreviewStyles();\n\n\t\t\t\t\/\/ Apply styles based on type\n\t\t\t\tif (type === \"text\") {\n\t\t\t\t\tconst previewText = document.getElementById('previewText');\n\t\t\t\t\tconst paragraph = previewText.querySelector(\"p\");\n\n\t\t\t\t\t\/\/ Apply the main rule\n\t\t\t\t\tparagraph.style.cssText += '; ' + item.title;\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tparagraph.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewText.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t} else if (type === \"pic\") {\n\t\t\t\t\tconst previewImage = document.getElementById('previewImage');\n\t\t\t\t\tconst img = previewImage.querySelector(\"img\");\n\n\t\t\t\t\t\/\/ Apply the main rule to the image\n\t\t\t\t\timg.style.cssText += '; ' + item.title;\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\timg.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewImage.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t} else if (type === \"background\") {\n\t\t\t\t\tconst previewBg = document.getElementById('previewBackground');\n\n\t\t\t\t\tif (item.title.includes(\"url\")) {\n\t\t\t\t\t\t\/\/ Update background images for this specific example\n\t\t\t\t\t\tconst bgImages = buildBackgroundImages(item);\n\t\t\t\t\t\tpreviewBg.style.backgroundImage = bgImages;\n\t\t\t\t\t} else {\n\t\t\t\t\t\t\/\/ Apply the main rule to the background container\n\t\t\t\t\t\tpreviewBg.style.cssText += '; ' + item.title;\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBg.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBg.parentNode.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else if (type === \"box\") {\n\t\t\t\t\tconst previewBox = document.getElementById('previewBox');\n\n\t\t\t\t\t\/\/ Apply the main rule to the background container\n\t\t\t\t\tpreviewBox.style.cssText += '; ' + item.title;\n\n\t\t\t\t\tif (item.additional_rules && Array.isArray(item.additional_rules)) {\n\t\t\t\t\t\titem.additional_rules.forEach(rule => {\n\t\t\t\t\t\t\tif (rule) {\n\t\t\t\t\t\t\t\tpreviewBox.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply additional rules if they exist\n\t\t\t\t\tif (additionalRules) {\n\t\t\t\t\t\tadditionalRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBox.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Apply parent rules to the preview container\n\t\t\t\t\tif (childRules) {\n\t\t\t\t\t\tconst childParagraph = previewBox.querySelector(\"p\");\n\n\t\t\t\t\t\tif (childParagraph) {\n\t\t\t\t\t\t\tchildRules.forEach(rule => {\n\t\t\t\t\t\t\t\tpreviewBox.querySelector(\"p\").style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (parentRules) {\n\t\t\t\t\t\tparentRules.forEach(rule => {\n\t\t\t\t\t\t\tpreviewBox.parentNode.style.cssText += '; ' + rule.rule;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else if (type === \"positioning\") {\n\t\t\t\t\tconst activeChild = document.getElementById('active-child-block');\n\t\t\t\t\tif (!activeChild) return;\n\n\t\t\t\t\t\/\/ \u0434\u043e\u0434\u0430\u0454\u043c\u043e CSS \u0437 \u043a\u043d\u043e\u043f\u043a\u0438\n\t\t\t\t\tactiveChild.style.cssText += '; ' + item.title;\n\t\t\t\t}\n\n\t\t\t\t\/\/ Update active button\n\t\t\t\tupdateActiveButton(index);\n\n\t\t\t\t\/\/ Copy the rule to clipboard only if shouldCopy is true\n\t\t\t\tif (shouldCopy) {\n\t\t\t\t\tconst ruleText = item.title;\n\t\t\t\t\tconst buttons = document.querySelectorAll('.control-option');\n\t\t\t\t\tcopyToClipboard(ruleText, buttons[index]);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction resetPreviewStyles() {\n\t\t\t\t\/\/ Reset text preview\n\t\t\t\tconst previewText = document.getElementById('previewText');\n\t\t\t\tif (previewText) {\n\t\t\t\t\tpreviewText.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst paragraph = previewText.querySelector('p');\n\t\t\t\t\tif (paragraph) {\n\t\t\t\t\t\tparagraph.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset image preview\n\t\t\t\tconst previewImage = document.getElementById('previewImage');\n\t\t\t\tif (previewImage) {\n\t\t\t\t\tpreviewImage.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst img = previewImage.querySelector('img');\n\t\t\t\t\tif (img) {\n\t\t\t\t\t\timg.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset background preview\n\t\t\t\tconst previewBg = document.getElementById('previewBackground');\n\t\t\t\tif (previewBg) {\n\t\t\t\t\t\/\/ Apply only base background styles (no accumulated styles)\n\t\t\t\t\tpreviewBg.style.cssText = `\n\t\t\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\t\t\theight: 200px;\n\t\t\t\t\t\t\t\t\t\t\tborder-radius: 8px;\n\t\t\t\t\t\t\t\t\t\t\tbackground-size: cover;\n\t\t\t\t\t\t\t\t\t\t\tbackground-position: center;\n\t\t\t\t\t\t\t\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\t\t\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\t\t\t\t\t\tposition: relative;\n\t\t\t\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t\t\t\t\t\t`;\n\n\t\t\t\t\t\/\/ Reset parent container\n\t\t\t\t\tif (previewBg.parentNode) {\n\t\t\t\t\t\tpreviewBg.parentNode.style.cssText = '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t\/\/ Reset box preview\n\t\t\t\tconst previewBox = document.getElementById('previewBox');\n\t\t\t\tif (previewBox) {\n\t\t\t\t\tpreviewBox.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\tconst paragraph = previewBox.querySelector('p');\n\t\t\t\t\tif (paragraph) {\n\t\t\t\t\t\tparagraph.style.cssText = ''; \/\/ Clear all inline styles\n\t\t\t\t\t}\n\n\t\t\t\t\t\/\/ Reset parent container\n\t\t\t\t\tif (previewBox.parentNode) {\n\t\t\t\t\t\tpreviewBox.parentNode.style.cssText = '';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction updateActiveButton(index) {\n\t\t\t\tconst buttons = document.querySelectorAll('.control-option');\n\t\t\t\tbuttons.forEach(button => {\n\t\t\t\t\tbutton.classList.remove('active');\n\t\t\t\t});\n\t\t\t\tif (buttons[index]) {\n\t\t\t\t\tbuttons[index].classList.add('active');\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t\/\/ Add keyboard navigation\n\t\t\tdocument.addEventListener('keydown', function(e) {\n\t\t\t\tconst numExamples = examples.length;\n\n\t\t\t\tif (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tconst nextIndex = (currentIndex + 1) % numExamples;\n\t\t\t\t\tsetExample(nextIndex);\n\t\t\t\t} else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tconst prevIndex = currentIndex === 0 ? numExamples - 1 : currentIndex - 1;\n\t\t\t\t\tsetExample(prevIndex);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t\/\/ Initialize without copying\n\t\t\tsetExample(0, false);\n\t\t<\/script>\n\t<\/section>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>object-fit: fill | contain | cover | none | scale-down;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>fill<\/code><\/strong> \u2014 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0454\u0442\u044c\u0441\u044f, \u0449\u043e\u0431 \u043f\u043e\u0432\u043d\u0456\u0441\u0442\u044e \u0437\u0430\u043f\u043e\u0432\u043d\u0438\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043d\u0435 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u044e\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0457.<\/li>\n\n\n\n<li><strong><code>contain<\/code><\/strong> \u2014 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f, \u0449\u043e\u0431 \u043f\u043e\u0432\u043d\u0456\u0441\u0442\u044e \u043f\u043e\u043c\u0456\u0441\u0442\u0438\u0442\u0438\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u044e\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0457; \u043c\u043e\u0436\u0443\u0442\u044c \u0437\u2019\u044f\u0432\u043b\u044f\u0442\u0438\u0441\u044f \u043f\u043e\u0440\u043e\u0436\u043d\u0456 \u043e\u0431\u043b\u0430\u0441\u0442\u0456.<\/li>\n\n\n\n<li><strong><code>cover<\/code><\/strong> \u2014 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f, \u0449\u043e\u0431 \u043f\u043e\u0432\u043d\u0456\u0441\u0442\u044e \u043f\u043e\u043a\u0440\u0438\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u044e\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0457; \u0437\u0430\u0439\u0432\u0456 \u0447\u0430\u0441\u0442\u0438\u043d\u0438 \u043e\u0431\u0440\u0456\u0437\u0430\u044e\u0442\u044c\u0441\u044f.<\/li>\n\n\n\n<li><strong><code>none<\/code><\/strong> \u2014 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435 \u0437\u043c\u0456\u043d\u044e\u0454 \u0440\u043e\u0437\u043c\u0456\u0440; \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454\u0442\u044c\u0441\u044f \u0443 \u0441\u0432\u043e\u0457\u0445 \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u0440\u043e\u0437\u043c\u0456\u0440\u0430\u0445.<\/li>\n\n\n\n<li><strong><code>scale-down<\/code><\/strong> \u2014 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f \u043b\u0438\u0448\u0435 \u044f\u043a\u0449\u043e \u0432\u0456\u043d \u0431\u0456\u043b\u044c\u0448\u0438\u0439 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440; \u043e\u0431\u0438\u0440\u0430\u0454\u0442\u044c\u0441\u044f \u043c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u043c\u0456\u0436 <code>none<\/code> \u0442\u0430 <code>contain<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u0440\u0456\u043c \u0446\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c, \u0443 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0454 \u0441\u043b\u0443\u0436\u0431\u043e\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>inherit<\/strong> \u2014 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0432\u0456\u0434 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n\n\n\n<li><strong>initial<\/strong> \u2014 \u0441\u043a\u0438\u0434\u0430\u0454 \u0434\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c;<\/li>\n\n\n\n<li><strong>unset<\/strong> \u2014 \u043f\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u044f\u043a <code>inherit<\/code> \u0434\u043b\u044f \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0435\u0439, \u0449\u043e \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u044e\u0442\u044c\u0441\u044f, \u0456 \u044f\u043a <code>initial<\/code> \u0434\u043b\u044f \u043d\u0435\u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u0438\u0445;<\/li>\n\n\n\n<li><strong>revert<\/strong> \u2014 \u0441\u043a\u0430\u0441\u043e\u0432\u0443\u0454 \u0441\u0442\u0438\u043b\u0456 \u0430\u0432\u0442\u043e\u0440\u0430 \u0456 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u0456 \u0441\u0442\u0438\u043b\u0456\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0447\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430;<\/li>\n\n\n\n<li><strong>revert-layer<\/strong> \u2014 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0437 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044c\u043e\u0433\u043e \u0448\u0430\u0440\u0443 \u043a\u0430\u0441\u043a\u0430\u0434\u0443 (<code>@layer<\/code>).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u0414\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043c\u043e\u043c\u0435\u043d\u0442\u0438<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>object-fit<\/code><\/strong> \u043f\u0440\u0430\u0446\u044e\u0454 \u0442\u0456\u043b\u044c\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u043c\u0456\u0449\u0443\u0432\u0430\u043d\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 (<code>&lt;img&gt;<\/code>, <code>&lt;video&gt;<\/code>, <code>&lt;canvas&gt;<\/code>, <code>&lt;picture&gt;<\/code>).<\/li>\n\n\n\n<li>\u0412\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043e\u043c \u0437 <strong><code>object-position<\/code><\/strong>, \u0449\u043e\u0431 \u043a\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0446\u0435\u043d\u0442\u0440\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u0430\u0431\u043e \u0437\u043c\u0456\u0449\u0435\u043d\u043d\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/li>\n\n\n\n<li>\u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f <strong><code>cover<\/code><\/strong> \u0430\u0431\u043e <strong><code>contain<\/code><\/strong> \u0437\u0440\u0443\u0447\u043d\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0438\u0445 \u0433\u0430\u043b\u0435\u0440\u0435\u0439, \u0449\u043e\u0431 \u0443\u0441\u0456 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0456\u0434\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0432\u0430\u043b\u0438\u0441\u044f \u043f\u0456\u0434 \u0440\u043e\u0437\u043c\u0456\u0440\u0438 \u0431\u043b\u043e\u043a\u0456\u0432.<\/li>\n\n\n\n<li><strong><code>scale-down<\/code><\/strong> \u043f\u0456\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u043b\u044f \u0437\u043c\u0456\u0448\u0430\u043d\u0438\u0445 \u0440\u043e\u0437\u043c\u0456\u0440\u0456\u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443, \u0449\u043e\u0431 \u0443\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0432\u0430\u043d\u043d\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u0456\u0432.<\/li>\n\n\n\n<li>\u0412\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454 \u043f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c \u0456 \u0441\u0443\u0447\u0430\u0441\u043d\u0456 \u0444\u043e\u0440\u043c\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c (PNG, WEBP, SVG).<\/li>\n\n\n\n<li>\u0412\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0441\u0456\u043c\u0430 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>object-fit CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c object-fit \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454, \u044f\u043a \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0430\u0431\u043e \u0432\u0456\u0434\u0435\u043e \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0454\u0442\u044c\u0441\u044f \u0447\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412\u043e\u043d\u0430 \u0434\u043e\u0437\u0432\u043e\u043b\u044f\u0454 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e\u0432\u0430\u0442\u0438, \u0447\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0457, \u043e\u0431\u0440\u0456\u0437\u0430\u0454\u0442\u044c\u0441\u044f \u0430\u0431\u043e \u0440\u043e\u0437\u0442\u044f\u0433\u0443\u0454\u0442\u044c\u0441\u044f, \u0449\u043e\u0431 \u0437\u0430\u043f\u043e\u0432\u043d\u0438\u0442\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430. object-fit \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e \u043a\u043e\u0440\u0438\u0441\u043d\u0430 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u0456\u0432 \u0442\u0430 \u0433\u0430\u043b\u0435\u0440\u0435\u0439. \u0406\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0438\u0439 \u043f\u0440\u0438\u043a\u043b\u0430\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0417\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u041a\u0440\u0456\u043c \u0446\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u044c, \u0443 \u0431\u0443\u0434\u044c-\u044f\u043a\u043e\u0457 CSS-\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0454 \u0441\u043b\u0443\u0436\u0431\u043e\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f: \u0414\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0456 \u043c\u043e\u043c\u0435\u043d\u0442\u0438<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10956],"tags":[],"class_list":["post-43748","post","type-post","status-publish","format-standard","hentry","category-html-dictionary-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/comments?post=43748"}],"version-history":[{"count":5,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43748\/revisions"}],"predecessor-version":[{"id":47560,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/posts\/43748\/revisions\/47560"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/media?parent=43748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/categories?post=43748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ua\/wp-json\/wp\/v2\/tags?post=43748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}