Aspect ratio

Intrinsic size & aspect ratio 27 Pt2. Layout Aspect ratio 20×20px width: auto; height: auto; width: 50px; height: 15px; width: auto; height: 15px; 20×20px width: 15px; height: auto; 20×20px keep the aspect ratio original size distortion! For external content. E.g.: <img/> , <video/> Avoid image distortion object-fit: scale-down origin origin scale scale scale contain scale scale scale cover scale fill distortion d i s t o r t i o n none origin origin origin browser's default scale overflow: The missile knows where it is at all times. The missile knows The missile knows The missile knows visible hidden auto scroll default Quirks : The scrollable area may not include bottom padding or child margin. NOTE : overflow DOES NOT apply to <img/> and <video/> ; object-fit rules! Use a div wrapper to scroll a image. 28 Pt2. Layout Aspect ratio `aspect-ratio: W/H` width from height and vice versa which axis? height:auto width:auto; height:auto width:auto height:auto => width × H/W min-height:auto => min-content aspect-ratio:2/1 width: 60px; height: auto; 2/1 width: 40px; height: auto; 2/1 width: 20px; height: auto; aspect-ratio:2/1 width: auto; height: 30px; 1. Control the automatic width/height from the other axis. 2. Avoid overflow in the controlled axis via automatic min-size . aspect-ratio:2/1 The missile knows where it is at all times. `aspect-ratio` examples width:auto => height × W/H min-width:auto => min-content Affects the auto size & min-size of the controlled axis! width:60px min-height:auto height:auto aspect-ratio:2/1 Looooooooooooong height:30px width:auto min-width:auto (min-content) (60px) (30px) (min-content) aspect-ratio:2/1 The missile knows where it is at all times. min-height:0 height:auto aspect-ratio:2/1 Looooooooooooong width:auto min-width:0 aspect-ratio:2/1 The missile height:auto min-height:auto overflow:hidden aspect-ratio:2/1 Looooooooooooo width:auto min-width:auto overflow:hidden remove auto min-size surprise auto also works