使用Flexbox和CSS变量实现不同宽高比图片的等高自适应布局

具体来说，如果一个图片的宽高比是 width / height，那么我们就可以将这个比值作为flex-grow的系数。这样，Flex容器会根据这些动态的flex-grow值来分配可用空间，使得每个Flex项的宽度与图片的原始宽度成比例，从而在所有Flex项高度一致的情况下，图片能够完美地保持其宽高比。

立即学习“前端免费学习笔记（深入）”；

实现步骤与代码示例

以下是实现此布局的CSS和HTML结构：

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

下载

HTML 结构

我们使用一个无序列表

作为Flex容器，每个列表项
• 包含一个标签。关键在于为每个
• 元素添加一个内联样式，定义一个CSS变量--r，其值就是对应图片的宽高比（宽度除以高度）。

  
  
  
      
      
      
      
  
  
      
  
          
          
  
              @@##@@
          
          
          
  
              @@##@@
          
          
          
  
              @@##@@
          
          
      
  
  

  CSS 样式

  在CSS中，我们将

  设置为Flex容器，并对
  • 和应用相应的样式。

    ul {
      list-style-type: none; /* 移除列表项标记 */
      padding: 0; /* 移除默认内边距 */
      margin: 0; /* 移除默认外边距 */
      display: flex; /* 启用Flexbox布局 */
      width: 100%; /* 占据父容器全部宽度 */
      /* align-items: stretch; */ /* 在此方案中不再需要，因为高度由flex-grow间接控制 */
    }
    
    li {
      /*
       * 核心：flex-grow的值通过calc()函数获取自定义属性--r（宽高比）。
       * 这使得每个li项的宽度分配与其内部图片的宽高比成正比。
       */
      flex-grow: calc(var(--r));
      flex-basis: 0; /* 初始尺寸为0，让flex-grow完全控制宽度分配 */
      flex-shrink: 1; /* 允许收缩 */
      display: flex; /* 使li内部的img能更好地控制尺寸 */
    }
    
    img {
      max-width: 100%; /* 图片最大宽度为其父li的100% */
      height: 100%; /* 图片高度填充其父li的高度 */
      display: block; /* 移除图片底部的额外空间 */
      object-fit: cover; /* 确保图片在填充空间时保持宽高比并裁剪，避免留白 */
      /* object-fit: contain; 如果希望图片完整显示，可能出现留白 */
    }

    代码解释：

    1. ul 样式：
       • display: flex; 将
         变为Flex容器。
       • width: 100%; 确保Flex容器占据可用宽度。
    2. li 样式：
       • flex-grow: calc(var(--r)); 是实现等高和保持宽高比的关键。calc(var(--r))会根据每个
       • 上定义的--r变量（即图片的宽高比）来计算其伸展因子。这样，宽图片会获得更大的伸展因子，从而在所有图片等高时占据更宽的空间。
       • flex-basis: 0; 设置Flex项的初始尺寸为0。这意味着Flex容器的可用空间将完全由flex-grow属性来分配。
       • display: flex; 将li自身也设置为一个Flex容器，这有助于img元素更好地填充其父级li的空间。
    3. img 样式：
       • max-width: 100%; 确保图片不会超出其父
       • 的宽度。
       • height: 100%; 确保图片的高度填充其父
       • 的高度。由于
       • 的宽度是根据宽高比动态计算的，并且img被限制在
       • 内部，所以当height: 100%时，img的宽度会自动调整以保持其原始宽高比。
       • object-fit: cover; 这是一个重要的辅助属性。它确保图片在填充其容器时保持原始宽高比，如果容器的宽高比与图片不符，图片会被裁剪以完全覆盖容器，避免出现空白区域。如果希望图片完整显示而不被裁剪，可以使用object-fit: contain;，但此时可能会在图片周围出现空白。

    工作原理深入分析

    当浏览器渲染这个布局时：

    1. 作为Flex容器，其子项
       • 尝试占据一行。
       • 每个
       • 的flex-basis为0，意味着它们在分配空间前没有固定的初始宽度。
       • flex-grow: calc(var(--r))使得每个
       • 的宽度分配权重与其内部图片的宽高比成正比。例如，如果一个
       • 的--r是1.77（16:9），另一个是1（1:1），那么第一个
       • 将获得比第二个
       • 更多的宽度空间。
       • 由于所有
       • 都在同一行，并且它们的高度是自适应的，Flexbox会根据flex-grow的比例分配水平空间，使得所有
       • 最终达到相同的高度。
       • 元素设置了height: 100%;和max-width: 100%;，结合object-fit: cover;（或contain），确保图片在填充其父
       • 的高度时，能够保持其原始宽高比，并相应地调整宽度。

    注意事项

    • 宽高比的准确性： flex-grow的值直接依赖于--r变量，因此确保--r的值准确反映图片的原始宽高比至关重要。如果图片是动态加载且宽高比未知，可能需要JavaScript在图片加载完成后计算并设置--r。
    • 图片加载： 如果图片在HTML加载时宽高比未知（例如，通过JavaScript动态插入），则需要在图片加载完成后获取其固有尺寸，然后计算并设置--r变量。
    • object-fit的选择： object-fit: cover;会裁剪图片以填充空间，确保没有留白。如果希望图片完整显示，即使留白也接受，可以使用object-fit: contain;。根据设计需求选择合适的object-fit值。
    • 性能考量： 对于大量的图片，内联样式可能会稍微增加HTML的大小。如果图片数量非常庞大且宽高比固定，可以考虑通过CSS类或预处理器生成样式，但对于本场景，内联CSS变量是简单直接且有效的方案。
    • 浏览器兼容性： CSS自定义属性（var()）和Flexbox在现代浏览器中都有良好的支持。

    总结

    通过巧妙地结合Flexbox的flex-grow属性和CSS自定义属性，我们可以优雅地解决不同宽高比图片在同一行内实现等高自适应布局的难题。这种方法不仅保持了图片的原有比例，还确保了布局的响应性和灵活性，为复杂的图片展示场景提供了一个强大而简洁的解决方案。开发者只需在HTML中提供图片的宽高比信息，CSS便能自动完成复杂的布局计算，极大地提高了开发效率和维护性。