[CSS21] Looking for feedback on max-width/min-width

You may have noticed a big red box in chapter 10[1]. That's because the 
CSS WG would like feedback on the interaction of 'max-width' with 
images.

The spec was never was very clear on that question (not ambiguous, but 
difficult to understand) and we found that some people expected it to 
mean something else.

So this is a request for feedback. Is the spec right? Or should it 
change?



The spec gives a typical example of the issue. Here is some more 
background, from a different perspective.

Consider these two use cases:


1) A thumbnails page with a matrix of photos, some portrait, some 
landscape. They are all shown centered inside their own square box:

    +------------+    +------------+    +------------+
    |            |    |   ######   |    |            |
    |############|    |   ######   |    |############|
    |############|    |   ######   |    |############|
    |############|    |   ######   |    |############|
    |            |    |   ######   |    |            |
    +------------+    +------------+    +------------+
       IMG_1001          IMG_1002          IMG_1003
    +------------+    +------------+    +------------+
    |   ######   |    |            |    |            |
    |   ######   |    |############|    |############|
    |   ######   |    |############|    |############|
    |   ######   |    |############|    |############|
    |   ######   |    |            |    |            |
    +------------+    +------------+    +------------+
       IMG_1004          IMG_1005          IMG_1006

We have a proposal for how to do this (without adding an extra DIV to 
the source), inspired by the FIT attribute of SMIL: you set the width 
and height of the square box and then you set a property 
'image-scaling' along these lines:

    IMG { width: 200px; height: 200px;
          border: thick white solid;
          image-scaling: contain }

(Other values of that property allow you to scale differently, and you 
can also specify where in the box the image is placed.)


2) Slides with images of various size on the right side. They should all 
be either 90% high or 30% wide, depending on whether they are wide or 
tall. That may cause some images to scale up and others to scale down.

    +-----------------------+    +-----------------------+
    |text text text +------+|    |text text text text +-+|
    |text text text |######||    |text text text text |#||
    |text text text |######||    |text text text text |#||
    |text text text +------+|    |text text text text |#||
    |text text text text    |    |text text text text +-+|
    +-----------------------+    +-----------------------+

You can either see this as a variation on the above, where you set the 
'max-width' and 'max-height' instead of the 'width' and 'height', like 
this:

    IMG { max-width: 30%; max-height: 90%;
          border: thick white solid;
          image-scaling: contain }

Or you can see it as something that is implicit in the definition of 
'max-width' and 'max-height' and that should already work in CSS2. And 
indeed it _almost_ works: if the image is big enough, then 

    IMG { max-width: 30%; max-height: 90%;
          border: thick white solid }

will scale it down to the required maximum size. The problem is that an 
image that is smaller than the slide will not be scaled up. You could 
try this:

    IMG { width: 1000% /* make image large enough */
          max-width: 30%; max-height: 100%;
          border: thick white solid }

but under the current definition in CSS2, that may cause the image to be 
scaled unevenly (i.e., lose its aspect ratio).


So the question is, basically, would you expect the last rule above to 
solve use case 2 or not? (The current spec says it doesn't.)


[1] 
http://www.w3.org/TR/2006/WD-CSS21-20061106/visudet.html#min-max-widths




Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Tuesday, 14 November 2006 18:47:19 UTC