列内的图形元素在最大高度上失败

Question

图像可以在列内缩放到 column-height 和 column-width，具有 CSS max-width 和 max-height 属性。但是当图像放在 <figure> 标签内时，max-width 似乎可以工作，但 max-height 失败 ^[1]。

我演示了here in this fiddle^[2]。示例 4 显示了正确的行为，而示例 3 在不同的浏览器中不一致地失败了。什么是适当的修复？

^[1]在 Firefox 中，它在包含 div 的整体中创建一个 overflow-y: scroll。 Chrome Canary 显示缩放到 max-width 的图像分解成几列。在 Safari 9 中，它确实显示了所需的结果。

^[2] 问题代码摘录：

div { 
  column-width: 150px;
  height: 50px;
  width: 400px;
  overflow: scroll;
  background: red;
}

img {
  max-height: 100%;
  max-width: 100%;   
}

figure { 
  background: blue;
  max-height: 100%;
  max-width: 100%;
}

<div>
  <figure>
    <img src="image_larger_than_column_height_and_width.jpg" alt="">
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi doloremque eum iure impedit molestias dolor recusandae perferendis fuga culpa, atque rerum, aliquid, vitae porro molestiae tempora rem corporis ab nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus officiis quia ab possimus vel. Doloremque distinctio id, debitis cum esse, adipisci impedit eligendi, quam voluptatum quod suscipit modi fugit molestiae!</p>
  <p>Ipsa harum quas pariatur velit ullam cupiditate sunt animi id? Maxime maiores facilis dolorem aperiam nulla vero, ut fuga blanditiis molestias veritatis repudiandae esse cum tempore. Magni, molestias officiis. Saepe.</p>
  <p>Sequi perspiciatis at aut, ex iusto rerum iste aperiam magnam consequatur nam, eius esse fuga perferendis. Quia eum minus consequuntur. Aliquam obcaecati ullam corporis amet velit numquam, accusantium odit facere?</p>
  <p>Aliquid unde iure cumque iusto illum saepe corporis assumenda esse perferendis rem quibusdam, ab eaque omnis tenetur possimus maiores voluptatem quaerat dignissimos reiciendis at delectus. Recusandae illo vero nemo doloremque!</p>
  <p>Praesentium voluptas totam enim non. Vel, quasi quo minima ea ratione corporis facere eligendi. Aspernatur doloremque quos, explicabo eius. Sequi cupiditate explicabo rem voluptatem quidem doloremque enim quo, officia dolorem!</p>
</div>

Answer 1

我会将"figure"设置为精确尺寸，即将"max-width"和"max-height"更改为"width"和"height"。

此外，将 "figure" 设置为 "display: initial" 似乎复制了第 4 个示例。

列内的图形元素在最大高度上失败

Figure elements inside columns fail on max-height

javascript

html

css

css-multicolumn-layout