0

画像は、CSSとプロパティを使用して、列内でcolumn-heightおよびにスケーリングできます。しかし、画像がタグ内に配置されている場合、機能しているように見えますが、失敗します[1]。column-widthmax-widthmax-height<figure>max-widthmax-height

ここでこのフィドル[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" を "display: initial" に設定すると、4 番目の例が再現されるようです。

于 2015-10-30T14:58:01.693 に答える