content-object-fit-fill-ref.html (681B)
1 <!DOCTYPE html> 2 <title>View transitions: display content in a pseudo with object-fit: none (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 #container { 7 width: 50px; 8 height: 50px; 9 position: absolute; 10 top: 10px; 11 left: 10px; 12 overflow: hidden; 13 } 14 #content { 15 background: lightblue; 16 width: 100px; 17 height: 100px; 18 transform-origin: top left; 19 transform: scale(0.5); 20 } 21 #inner { 22 width: 10px; 23 height: 10px; 24 background: green; 25 top: 5px; 26 left: 10px; 27 } 28 29 html { background: lightpink; } 30 </style> 31 32 <div id=container><div id=content><div id=inner></div></div></div>