0

图像可以在列内缩放为column-heightand column-width，使用 CSSmax-width和max-height属性。但是当图像被放置在<figure>标签内时，max-width似乎工作正常，但max-height失败了[1]。

我在这个小提琴[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>
4

1 回答 1

0

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

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

于 2015-10-30T14:58:01.693 回答