Bootstrap3中如何让图片适配div高度且随列宽缩小

问题背景 #

基于Bootstrap 3实现报纸式多列布局，要求文本环绕图片、图片自适应容器高度、列窄时自动缩窄图片宽度。目前后两点已实现，但图片会超出容器底部。

当前代码 #

HTML

<h1>
  Test
</h1>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="newspaper">
        <p><img src="https://streissguthgardens.com/assets/Streissguth-In_Love_with_a_Hillside_Garden-e1b787f274c8c2cc3beaf52cdcba1dbee982c503ab098d558a4053702ba8d8e1.jpg" class="book img-responsive img-thumbnail pull-left" alt="Place holder text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Faucibus vitae aliquet nec ullamcorper sit amet risus. Urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin. Ipsum nunc aliquet bibendum enim facilisis gravida.</p>
        <p>Congue nisi vitae suscipit tellus mauris a diam. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nunc vel risus commodo viverra maecenas. Sed arcu non odio euismod lacinia at quis risus sed. Eu sem integer vitae justo eget. Lectus quam id leo in vitae. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Id leo in vitae turpis massa sed elementum tempus. In eu mi bibendum neque egestas congue quisque egestas. Nisl pretium fusce id velit ut tortor pretium. Convallis tellus id interdum velit laoreet id donec. Sed vulputate odio ut enim. Ipsum a arcu cursus vitae congue mauris. Lectus nulla at volutpat diam ut venenatis. Morbi tristique senectus et netus et malesuada fames ac. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Est velit egestas dui id.
        </p>
      </div>
    </div>
  </div>
</div>

CSS

.book {  
  height: 100%
  max-height: 100%;
  object-fit: scale-down;
  width: auto;
}
.newspaper {
  background: lightgray;
  column-count: 3;
  column-gap: 20px;
}

问题分析 #

1. 给.book设置height:100%会让图片强制继承容器.newspaper的整体高度，而非所在列的内容高度，直接导致图片超出文本区域。
2. 包含图片的<p>被多列布局拆分到不同列，浮动的图片会跟着段落的跨列部分延伸，进一步加剧溢出问题。

解决方案 #

步骤1：修复图片高度设置

移除height:100%，保留max-height:100%，让图片高度自适应宽度，同时限制最大高度不超过容器可用空间：

.book {
  max-height: 100%;
  object-fit: scale-down;
  width: auto;
  /* 可选：添加margin避免图片紧贴文本 */
  margin-right: 15px;
  margin-bottom: 10px;
}

步骤2：防止段落跨列拆分

给包含图片的段落添加break-inside: avoid，确保段落和图片都在同一列内，避免跨列导致的溢出：

.newspaper p:first-child {
  break-inside: avoid;
}

效果验证 #

• 文本仍能正常环绕图片
• 列宽缩小时图片自动适配宽度
• 图片不会再超出容器底部

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