如何实现3个div水平排列匹配参考视频效果 图片保持宽高比

结论 #

你需要的三栏水平排列、图片保持宽高比的弹性布局效果完全不需要JavaScript实现，仅通过CSS即可实现全部需求。

调整方案 #

你的HTML代码无需修改，仅需调整SCSS代码即可实现目标效果，修改后的完整SCSS代码如下：

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #efefef;
}
h1,h2,h3 {
  margin: 0;
}
h1 {
  margin-bottom: 20px;
}
img{
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: stretch;
  
  .text-block {
    flex: 1;
    background: #e3e3e3;
    padding-top: 250px;
    
    .text-wrapper {
      margin: 0 10%;
      overflow: auto;
    }
  }
  
  .image-block {
    flex-shrink: 0;
    height: 100%;
  }
}

核心修改点说明 #

• 取消了文本块固定百分比宽度的设置，改用flex:1让两侧文本块自动平分容器剩余宽度，适配性更强
• 给图片设置height:100%+width:auto，搭配已有的object-fit:contain，确保图片缩放时始终保持原始宽高比不会变形
• 给图片块添加flex-shrink:0，避免容器宽度不足时图片被挤压
• 给弹性容器添加align-items:stretch，让所有子块高度自动撑满容器

如果你需要限制图片的最大宽度占比，仅需给.image-block添加max-width: [你需要的占比]即可，全程不需要编写任何JS代码。

内容的提问来源于stack exchange，提问作者dotaplayer