20.宽高比 & 多行文本截断

文章预览

宽高比 创建一个具有指定宽高比的响应式容器。 使用 CSS 自定义属性 --aspect-ratio 来定义所需的宽高比。 将容器元素设置为 position: relative 和 height: 0 ,使用 calc() 函数和 --aspect-ratio 自定义属性计算其高度。 将容器元素的直接子元素设置为 position: absolute 并填充其父元素,同时给它 object-fit: cover 以保持宽高比。 < div   class = "container" >   < img   src = "https://picsum.photos/id/119/800/450"  /> div > .container  {   --aspect-ratio :  16 / 9 ;   position : relative;   height :  0 ;   padding-bottom :  calc ( 100%  / (var(--aspect-ratio))); } .container  > * {   position : absolute;   top :  0 ;   left :  0 ;   width :  100% ;   height :  100% ;   object-fit : cover; } 这个技巧利用了一些巧妙的 CSS 技术来创建一个具有特定宽高比的响应式容器: ………………………………