[{"data":1,"prerenderedAt":162},["ShallowReactive",2],{"snippet-\u002Fsnippets\u002Ffull-width-image":3},{"id":4,"title":5,"body":6,"description":151,"draft":152,"extension":153,"lastModified":154,"meta":155,"navigation":156,"path":157,"seo":158,"stem":159,"tags":160,"__hash__":161},"snippets\u002Fsnippets\u002Ffull-width-image.md","Full width image in a max width container",{"type":7,"value":8,"toc":149},"minimark",[9,131,134,145],[10,11,16],"pre",{"className":12,"code":13,"language":14,"meta":15,"style":15},"language-css shiki shiki-themes github-dark",".full-bleed {\n  object-fit: cover;\n  max-width: none;\n  width: 100vw;\n  position: relative;\n  inset: 0 50%;\n  margin-inline: -50vw;\n}\n","css","",[17,18,19,32,48,61,78,91,110,125],"code",{"__ignoreMap":15},[20,21,24,28],"span",{"class":22,"line":23},"line",1,[20,25,27],{"class":26},"svObZ",".full-bleed",[20,29,31],{"class":30},"s95oV"," {\n",[20,33,35,39,42,45],{"class":22,"line":34},2,[20,36,38],{"class":37},"sDLfK","  object-fit",[20,40,41],{"class":30},": ",[20,43,44],{"class":37},"cover",[20,46,47],{"class":30},";\n",[20,49,51,54,56,59],{"class":22,"line":50},3,[20,52,53],{"class":37},"  max-width",[20,55,41],{"class":30},[20,57,58],{"class":37},"none",[20,60,47],{"class":30},[20,62,64,67,69,72,76],{"class":22,"line":63},4,[20,65,66],{"class":37},"  width",[20,68,41],{"class":30},[20,70,71],{"class":37},"100",[20,73,75],{"class":74},"snl16","vw",[20,77,47],{"class":30},[20,79,81,84,86,89],{"class":22,"line":80},5,[20,82,83],{"class":37},"  position",[20,85,41],{"class":30},[20,87,88],{"class":37},"relative",[20,90,47],{"class":30},[20,92,94,97,99,102,105,108],{"class":22,"line":93},6,[20,95,96],{"class":37},"  inset",[20,98,41],{"class":30},[20,100,101],{"class":37},"0",[20,103,104],{"class":37}," 50",[20,106,107],{"class":74},"%",[20,109,47],{"class":30},[20,111,113,116,118,121,123],{"class":22,"line":112},7,[20,114,115],{"class":37},"  margin-inline",[20,117,41],{"class":30},[20,119,120],{"class":37},"-50",[20,122,75],{"class":74},[20,124,47],{"class":30},[20,126,128],{"class":22,"line":127},8,[20,129,130],{"class":30},"}\n",[132,133],"full-bleed",{},[135,136,137,138],"p",{},"Original Source: ",[139,140,144],"a",{"href":141,"rel":142},"https:\u002F\u002Fcss-tricks.com\u002Ffull-bleed\u002F",[143],"nofollow","Full Bleed CSS Tricks",[146,147,148],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":15,"searchDepth":34,"depth":34,"links":150},[],"Break an image out of a max width container and stretch it edge to edge. A short CSS full bleed rule built from 100vw, inset and a negative inline margin of -50vw.",false,"md","2026-08-29T17:42:32+07:00",{},true,"\u002Fsnippets\u002Ffull-width-image",{"title":5,"description":151},"snippets\u002Ffull-width-image","css, image","pJE6IPnnc3ZNxpDV7G61nTK5R-XcUHgmQkaBLlRv2LI",1788101292491]