[{"data":1,"prerenderedAt":90},["Reactive",2],{"blog-post-markdown-image-alignment-positioning-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":61,"related":63},"markdown-image-alignment-positioning-complete-guide","Markdown Image Alignment and Positioning: Complete Guide for Professional Layouts","Master image alignment, positioning, and layout control in Markdown. Learn how to center, float, resize, and create responsive image galleries with HTML integration.","Images are essential elements in modern documentation and content creation, but standard Markdown provides limited control over image positioning and alignment. Understanding how to effectively…","2025-08-21","Tutorial","Matthew Rathbone","markdown image alignment, markdown center images, markdown image positioning, markdown image layout, responsive images markdown, markdown image float",10,"\u003Cp>Images are essential elements in modern documentation and content creation, but standard Markdown provides limited control over image positioning and alignment. Understanding how to effectively align, position, and layout images in Markdown documents is crucial for creating professional, visually appealing content. This comprehensive guide covers everything from basic alignment techniques to advanced responsive image layouts.\u003C/p>\n\u003Ch2 id=\"why-image-positioning-matters\">Why Image Positioning Matters\u003C/h2>\n\u003Cp>Proper image alignment and positioning provide several important benefits for your content:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Visual Hierarchy\u003C/strong>: Well-positioned images guide readers through your content\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Proper alignment creates polished, magazine-quality layouts\u003C/li>\n\u003Cli>\u003Cstrong>Content Flow\u003C/strong>: Strategic positioning improves readability and user engagement\u003C/li>\n\u003Cli>\u003Cstrong>Responsive Design\u003C/strong>: Adaptive layouts work across different screen sizes\u003C/li>\n\u003Cli>\u003Cstrong>Brand Consistency\u003C/strong>: Consistent image positioning maintains visual identity\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"basic-markdown-image-syntax\">Basic Markdown Image Syntax\u003C/h2>\n\u003Cp>Standard Markdown uses a simple syntax for images:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">![\u003Cspan class=\"hljs-string\">Alt text\u003C/span>](\u003Cspan class=\"hljs-link\">image.jpg\u003C/span>)\n![\u003Cspan class=\"hljs-string\">Alt text\u003C/span>](\u003Cspan class=\"hljs-link\">image.jpg "Optional title"\u003C/span>)\n\u003C/code>\u003C/pre>\u003Cp>However, this basic syntax offers no positioning control. Images appear inline with text flow, which often isn't ideal for professional documentation.\u003C/p>\n\u003Ch2 id=\"html-enhanced-image-positioning\">HTML-Enhanced Image Positioning\u003C/h2>\n\u003Cp>Since most Markdown processors allow HTML, you can use HTML tags for precise image control:\u003C/p>\n\u003Ch3 id=\"center-alignment\">Center Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"center"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Centered image"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Modern CSS approach -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Centered image"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"left-and-right-alignment\">Left and Right Alignment\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Left aligned with text wrap -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Left aligned"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"float: left; margin: 0 15px 15px 0;"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Right aligned with text wrap -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Right aligned"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"float: right; margin: 0 0 15px 15px;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"block-level-centering\">Block-Level Centering\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Block centered"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: block; margin: 0 auto;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-alignment-methods\">Platform-Specific Alignment Methods\u003C/h2>\n\u003Ch3 id=\"github-and-gitlab\">GitHub and GitLab\u003C/h3>\n\u003Cp>GitHub and GitLab support HTML alignment:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"center"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"screenshot.png"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"GitHub centered image"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"left"\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"icon.png"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Left aligned icon"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">align\u003C/span>=\u003Cspan class=\"hljs-string\">"right"\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"icon.png"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Right aligned icon"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"jekyll-image-alignment\">Jekyll Image Alignment\u003C/h3>\n\u003Cp>Jekyll sites can use custom CSS classes and includes:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- Using Jekyll includes -->\n{% include image.html \n   url="image.jpg" \n   alt="Description"\n   align="center" %}\n\n<!-- Using custom CSS classes -->\n![Description](image.jpg){: .center-image}\n![Description](image.jpg){: .float-left}\n![Description](image.jpg){: .float-right}\n\u003C/code>\u003C/pre>\u003Cp>CSS definitions:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.center-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.float-left\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">float\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.float-right\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">float\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-image-processing\">Hugo Image Processing\u003C/h3>\n\u003Cp>Hugo provides built-in image processing with positioning:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">{{< figure src="image.jpg" \n\u003Cspan class=\"hljs-code\">           title="Image title" \n           alt="Alt text"\n           align="center" \n           width="600" >}}\n\u003C/span>\n{{< img src="image.jpg" \n\u003Cspan class=\"hljs-code\">        alt="Alt text"\n        class="float-left" \n        style="max-width: 300px;" >}}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"obsidian-image-alignment\">Obsidian Image Alignment\u003C/h3>\n\u003Cp>Obsidian supports custom CSS and alignment syntax:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">![[image.jpg|center]]\n![[image.jpg|left|300]]\n![[image.jpg|right|400]]\n\n<!-- Using HTML for more control -->\n\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Obsidian image"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: block; margin: 0 auto; width: 80%;"\u003C/span>>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-layout-techniques\">Advanced Layout Techniques\u003C/h2>\n\u003Ch3 id=\"image-galleries\">Image Galleries\u003C/h3>\n\u003Cp>Create responsive image galleries using CSS Grid:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-gallery"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image1.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Gallery image 1"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image2.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Gallery image 2"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image3.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Gallery image 3"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image4.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Gallery image 4"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.image-gallery\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n  \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(auto-fit, \u003Cspan class=\"hljs-built_in\">minmax\u003C/span>(\u003Cspan class=\"hljs-number\">200px\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr));\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-gallery\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">200px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: cover;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"side-by-side-images\">Side-by-Side Images\u003C/h3>\n\u003Cp>Display images side by side with captions:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-pair"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"before.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Before image"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Before optimization\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"after.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"After image"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>After optimization\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.image-pair\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">300px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e1e1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-image-layouts\">Responsive Image Layouts\u003C/h3>\n\u003Cp>Create layouts that adapt to screen size:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-image-layout"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"main-image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Main content image"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-caption"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>Image Title\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h4\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Detailed caption explaining the image content and its relevance to the surrounding text.\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.responsive-image-layout\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">800px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.responsive-image-layout\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-caption\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-caption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h4\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-caption\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-image-layout\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.image-caption\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"image-size-control\">Image Size Control\u003C/h2>\n\u003Ch3 id=\"responsive-sizing\">Responsive Sizing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Responsive image with max-width -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"large-image.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Responsive image"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Fixed maximum size -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Size controlled image"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 600px; width: 100%; height: auto;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"aspect-ratio-preservation\">Aspect Ratio Preservation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"aspect-ratio-container"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Aspect ratio preserved"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.aspect-ratio-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> auto;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aspect-ratio-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">""\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">56.25%\u003C/span>; \u003Cspan class=\"hljs-comment\">/* 16:9 aspect ratio */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.aspect-ratio-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: cover;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"multiple-size-variants\">Multiple Size Variants\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Using srcset for responsive images -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image-medium.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"image-small.jpg 400w, \n             image-medium.jpg 800w, \n             image-large.jpg 1200w"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">sizes\u003C/span>=\u003Cspan class=\"hljs-string\">"(max-width: 400px) 400px, \n            (max-width: 800px) 800px, \n            1200px"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Multi-resolution image"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"text-wrapping-and-flow-control\">Text Wrapping and Flow Control\u003C/h2>\n\u003Ch3 id=\"clear-floating-images\">Clear Floating Images\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Image with text wrap -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"thumbnail.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Floating thumbnail"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"float: left; margin: 0 20px 20px 0; max-width: 150px;"\u003C/span>>\u003C/span>\n\nThis text will wrap around the floating image on the right side. The image maintains its position while text flows naturally around it.\n\n\u003Cspan class=\"hljs-comment\"><!-- Clear the float -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"clear: both;"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\nNext paragraph starts below the image without wrapping.\n\u003C/code>\u003C/pre>\u003Ch3 id=\"margin-and-padding-control\">Margin and Padding Control\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"content-image.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Well-spaced image"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: block; \n            margin: 40px auto; \n            padding: 20px;\n            border: 1px solid #ddd;\n            background: #fff;\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n            max-width: 100%;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-css-techniques\">Advanced CSS Techniques\u003C/h2>\n\u003Ch3 id=\"image-overlays-and-effects\">Image Overlays and Effects\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-overlay-container"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"background-image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Background image"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"overlay"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>Overlay Title\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h3\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Descriptive text over the image\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>Call to Action\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.image-overlay-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-overlay-container\u003C/span> \u003Cspan class=\"hljs-selector-tag\">img\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.overlay\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translate\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>, -\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.7\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">80%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.overlay\u003C/span> \u003Cspan class=\"hljs-selector-tag\">h3\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.overlay\u003C/span> \u003Cspan class=\"hljs-selector-tag\">p\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.overlay\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background \u003Cspan class=\"hljs-number\">0.3s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.overlay\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"image-comparison-sliders\">Image Comparison Sliders\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-comparison"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"comparison-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"before.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Before image"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"before-image"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"after.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"After image"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"after-image"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"slider"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"comparison-slider"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"slider-button"\u003C/span>>\u003C/span>⟷\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"comparison-labels"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"before-label"\u003C/span>>\u003C/span>Before\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"after-label"\u003C/span>>\u003C/span>After\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.image-comparison\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">600px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: Arial, sans-serif;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.comparison-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.before-image\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.after-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">object-fit\u003C/span>: cover;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.after-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">clip-path\u003C/span>: \u003Cspan class=\"hljs-built_in\">polygon\u003C/span>(\u003Cspan class=\"hljs-number\">50%\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-number\">0%\u003C/span>, \u003Cspan class=\"hljs-number\">100%\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>, \u003Cspan class=\"hljs-number\">50%\u003C/span> \u003Cspan class=\"hljs-number\">100%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.slider\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: col-resize;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateX\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.slider-button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translate\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>, -\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.comparison-labels\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e1e1e1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.before-label\u003C/span>, \u003Cspan class=\"hljs-selector-class\">.after-label\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: bold;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-considerations\">Accessibility Considerations\u003C/h2>\n\u003Ch3 id=\"proper-alt-text\">Proper Alt Text\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Descriptive alt text -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"data-visualization.png"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Bar chart showing 40% increase in user engagement over 6 months"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Decorative images -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"decorative-border.png"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span> \n     \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"presentation"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 100%; height: 20px;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"screen-reader-friendly-layouts\">Screen Reader Friendly Layouts\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 600px; margin: 20px auto; text-align: center;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"process-diagram.jpg"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Three-step process diagram showing data input, processing, and output phases"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"margin-top: 10px; font-style: italic; color: #666;"\u003C/span>>\u003C/span>\n    Figure 1: Data processing workflow showing the three main phases of our system architecture\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"keyboard-navigation-support\">Keyboard Navigation Support\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-image"\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Interactive product showcase"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"product-main.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Main product view"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"image-controls"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Image navigation controls"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Previous image"\u003C/span>>\u003C/span>‹\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Next image"\u003C/span>>\u003C/span>›\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.interactive-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.interactive-image\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-controls\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-controls\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.9\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background \u003Cspan class=\"hljs-number\">0.3s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.image-controls\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.image-controls\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"images-not-centering\">Images Not Centering\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Images appear left-aligned despite centering attempts\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Ensure block-level display -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Centered image"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: block; margin: 0 auto; max-width: 100%;"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Use container div -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"text-align: center;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Centered image"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Check for conflicting CSS -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Centered image"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: block !important; margin: 0 auto !important;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-issues\">Responsive Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Images don't resize properly on mobile devices\u003C/p>\n\u003Cp>\u003Cstrong>Solution\u003C/strong>: Always include responsive styling:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"large-image.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Responsive image"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; \n            height: auto; \n            width: auto;\n            display: block;"\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"float-clearing-problems\">Float Clearing Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Text doesn't flow correctly around floating images\u003C/p>\n\u003Cp>\u003Cstrong>Solution\u003C/strong>: Use proper clearing techniques:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"floating-image.jpg"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Floating image"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"float: left; margin: 0 20px 20px 0;"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>Text that wraps around the image...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Clear float before next section -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"clear: both; height: 0; overflow: hidden;"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>Next section starts here\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"tools-and-further-reading\">Tools and Further Reading\u003C/h2>\n\u003Cp>The HTML-based techniques in this guide are reliable on GitHub, GitLab, Jekyll, and MkDocs — but they don't travel everywhere. Notion and Slack strip inline HTML entirely and use their own image blocks instead, Obsidian has a separate \u003Ccode>![[image.png|300]]\u003C/code> embed syntax rather than HTML, and Confluence/Jira require resizing through their own editor after the image is pasted or attached. See our \u003Ca href=\"/blog/markdown-image-sizing-alignment-across-platforms\">guide to image sizing and alignment across platforms\u003C/a> for the full breakdown of what works where. If you'd rather generate the correct sized/aligned snippet — with an optional caption or link wrapper — than hand-write the HTML yourself, our \u003Ca href=\"/tools/markdown-image-formatter\">Markdown Image Formatter\u003C/a> does that.\u003C/p>\n\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Image alignment techniques work excellently with other Markdown documentation features. When creating comprehensive visual guides, combine proper image positioning with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to organize lengthy visual content into manageable, expandable sections.\u003C/p>\n\u003Cp>For technical documentation that includes both visual elements and step-by-step procedures, image alignment complements \u003Ca href=\"/blog/markdown-task-lists-and-checkboxes-complete-guide\">task lists and checkboxes\u003C/a> by providing clear visual context for each step in a process.\u003C/p>\n\u003Cp>When documenting complex interfaces or code examples alongside screenshots, consider using image positioning with \u003Ca href=\"/blog/markdown-syntax-highlighting-complete-guide\">syntax highlighting\u003C/a> to create comprehensive tutorials that balance visual and textual information.\u003C/p>\n\u003Ch2 id=\"best-practices\">Best Practices\u003C/h2>\n\u003Ch3 id=\"performance-optimization\">Performance Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Optimize image loading -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"optimized-image.webp"\u003C/span> \n     \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Performance optimized image"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">loading\u003C/span>=\u003Cspan class=\"hljs-string\">"lazy"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>\n     \u003Cspan class=\"hljs-attr\">decoding\u003C/span>=\u003Cspan class=\"hljs-string\">"async"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Provide fallback formats -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">picture\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C/span> \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"image.webp"\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"image/webp"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C/span> \u003Cspan class=\"hljs-attr\">srcset\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"image/jpeg"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"image.jpg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Fallback image"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">picture\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"consistent-spacing\">Consistent Spacing\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Create consistent image spacing */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.content-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span> auto;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.inline-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: middle;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.5em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.3s\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.gallery-image\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">1.02\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.15\u003C/span>);\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-first-design\">Mobile-First Design\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile-first responsive images */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.responsive-image\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-image\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">70%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">30px\u003C/span> auto;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.responsive-image\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">800px\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"seo-and-performance-benefits\">SEO and Performance Benefits\u003C/h2>\n\u003Ch3 id=\"image-seo-optimization\">Image SEO Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- SEO-optimized image markup -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figure\u003C/span> \u003Cspan class=\"hljs-attr\">itemscope\u003C/span> \u003Cspan class=\"hljs-attr\">itemtype\u003C/span>=\u003Cspan class=\"hljs-string\">"https://schema.org/ImageObject"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"tutorial-screenshot.jpg"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Step-by-step tutorial showing markdown image alignment process"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"contentUrl"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"max-width: 100%; height: auto;"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">figcaption\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"caption"\u003C/span>>\u003C/span>\n    Figure 2: Complete workflow for implementing responsive image layouts in Markdown documents\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figcaption\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">itemprop\u003C/span>=\u003Cspan class=\"hljs-string\">"description"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"Detailed screenshot tutorial for markdown image positioning"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">figure\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-metrics\">Performance Metrics\u003C/h3>\n\u003Cp>Well-positioned images improve user experience metrics:\u003C/p>\n\u003Cul>\n\u003Cli>Reduced bounce rate through better visual engagement\u003C/li>\n\u003Cli>Increased time on page with properly formatted content\u003C/li>\n\u003Cli>Better accessibility scores with semantic markup\u003C/li>\n\u003Cli>Improved mobile usability with responsive layouts\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Mastering image alignment and positioning in Markdown transforms basic documentation into visually compelling, professional content that enhances reader engagement and comprehension. By combining standard Markdown syntax with HTML and CSS techniques, you can create sophisticated layouts that work across different platforms and devices.\u003C/p>\n\u003Cp>The key to effective image positioning lies in understanding your platform's capabilities, maintaining consistency in your approach, and always prioritizing responsive design and accessibility. Whether you're creating simple documentation with centered images or complex visual guides with interactive galleries, the techniques covered in this guide provide the foundation for professional image presentation.\u003C/p>\n\u003Cp>Remember to test your image layouts across different devices and browsers, optimize for performance with appropriate image formats and sizing, and always include proper alt text for accessibility. With these practices, your Markdown documents will achieve the visual polish and professional appearance that sets them apart from basic text-only content.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52,55,58],{"id":16,"text":17,"level":18},"why-image-positioning-matters","Why Image Positioning Matters",2,{"id":20,"text":21,"level":18},"basic-markdown-image-syntax","Basic Markdown Image Syntax",{"id":23,"text":24,"level":18},"html-enhanced-image-positioning","HTML-Enhanced Image Positioning",{"id":26,"text":27,"level":18},"platform-specific-alignment-methods","Platform-Specific Alignment Methods",{"id":29,"text":30,"level":18},"advanced-layout-techniques","Advanced Layout Techniques",{"id":32,"text":33,"level":18},"image-size-control","Image Size Control",{"id":35,"text":36,"level":18},"text-wrapping-and-flow-control","Text Wrapping and Flow Control",{"id":38,"text":39,"level":18},"advanced-css-techniques","Advanced CSS Techniques",{"id":41,"text":42,"level":18},"accessibility-considerations","Accessibility Considerations",{"id":44,"text":45,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":47,"text":48,"level":18},"tools-and-further-reading","Tools and Further Reading",{"id":50,"text":51,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":53,"text":54,"level":18},"best-practices","Best Practices",{"id":56,"text":57,"level":18},"seo-and-performance-benefits","SEO and Performance Benefits",{"id":59,"text":60,"level":18},"conclusion","Conclusion",[62],"markdown-image-formatter",[64,72,82],{"slug":65,"title":66,"description":67,"excerpt":68,"date":69,"category":9,"author":10,"keywords":70,"readingMinutes":71},"markdown-image-captions-complete-guide","Markdown Image Captions: Complete Guide for Professional Visual Documentation","Master image captions in Markdown for professional documentation. Learn platform-specific implementations, HTML alternatives, and responsive design techniques for enhanced visual content accessibility.","Image captions in Markdown elevate visual content from simple illustrations to professional, accessible documentation that enhances reader comprehension and meets modern web accessibility…","2025-09-07","markdown image captions, image descriptions markdown, figure captions markdown, markdown image alt text, responsive image captions, markdown visual documentation, accessible image captions",17,{"slug":73,"title":74,"description":75,"excerpt":76,"date":77,"category":78,"author":79,"keywords":80,"readingMinutes":81},"markdown-image-sizing-alignment-across-platforms","Markdown Image Sizing and Alignment Across Platforms: What Actually Works","Wrapping an image in a sized, centered \u003Cimg> tag works great in GitHub — but paste that same Markdown into Notion or Slack and the HTML just vanishes. Here's which platforms honor inline HTML for images, which have their own separate syntax, and which need attachments instead.","Standard Markdown's image syntax — — has no way to control size or alignment. There's no width=, no center, nothing. So the moment you need a smaller image, or one centered on the page instead of…","2026-09-04","workflows","Matt Rathbone","markdown image size, markdown image alignment, resize image markdown, center image markdown, obsidian image size, notion image markdown, markdown image html platforms",8,{"slug":83,"title":84,"description":85,"excerpt":86,"date":87,"category":9,"author":10,"keywords":88,"readingMinutes":89},"markdown-multi-column-layouts-complete-guide","Markdown Multi-Column Layouts: Complete Guide for Professional Documentation and Responsive Design","Master multi-column layouts in Markdown using CSS Grid, Flexbox, and HTML techniques. Learn responsive design, content organization, and platform-specific implementations for professional documentation.","Multi-column layouts in Markdown enable sophisticated content organization that transforms standard linear documentation into visually engaging, space-efficient presentations. While basic Markdown…","2025-08-26","markdown multi-column, markdown columns, markdown layout, css grid markdown, flexbox markdown, responsive markdown design, multi-column documentation",14,1792184940968]