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中，它会在整个overflow-y: scroll中创建一个div。 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

我会设置＆＃34;数字＆＃34;具有精确的尺寸，即改变＆＃34; max-width＆＃34;和＆＃34; max-height＆＃34;到＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;。

另外，设置＆＃34;数字＆＃34;到＆＃34;显示：初始＆＃34;似乎复制了第四个例子。

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

1 个答案: