Re: [css-break] slicing content

Andrei Bucur wrote:

 > >Consider this test case:
 > >
 > >  http://www.wiumlie.no/2014/tests/multicol-clip.html
 > >
 > >which has three-column fixed-height elements with a tall image and some
 > >large-font text; neither the image nor the large-font text fit into
 > >the fixed-width element.
 > >
 > >Webkit-derived implementations resolve this overconstrained situation
 > >by slicing the image and the text into "stripes" that are placed in
 > >different columns. The thinking is, presumably, that as much content
 > >as possible should be visible.
 > 
 > There’s a little more to this behaviour in WebKit. The image will be 
 > pushed in the next column only if slicing is avoided by doing so. In this 
 > case, the image is taller than one column so slicing is not avoidable (per 
 > WebKit's initial fragmentation design). Try to set the height of the image 
 > to 100px and you’ll notice it will be positioned in the second column.

Yes, it's not quite as crazy as the test case indicates :-)

For replaced content, one can also set:

  .multicol { height: 500px }
  .multicol img { max-height: 500px }

But the result is wasted space -- both in the column before the image,
and most likely in the column of the image (if the image doens't fill
the whole width when scaled down).

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Tuesday, 27 January 2015 10:22:52 UTC