文章预览
宽高比 创建一个具有指定宽高比的响应式容器。 使用 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 技术来创建一个具有特定宽高比的响应式容器:
………………………………
