Re: [css-background] "background-repeat:round;" and aspect ratio

On Fri, Jul 16, 2010 at 11:39 AM, Brian Manthos <brianman@microsoft.com> wrote:
> Assume (for simplicity):
> 1. Image referenced via background-image has intrinsic width, height(, aspect ratio)
> 2. Element upon which the style is applied is larger than the image in both dimensions, and larger than 10px by 20px
>
> Scenarios:
> a. background-repeat:round  repeat; background-size: auto auto;
> b. background-repeat:repeat round ; background-size: auto auto;
> c. background-repeat:round  round ; background-size: auto auto;
>
> d. background-repeat:round  repeat; background-size: 10px auto;
> e. background-repeat:repeat round ; background-size: 10px auto;
> f. background-repeat:round  round ; background-size: 10px auto;
>
> g. background-repeat:round  repeat; background-size: auto 20px;
> h. background-repeat:repeat round ; background-size: auto 20px;
> i. background-repeat:round  round ; background-size: auto 20px;
>
> j. background-repeat:round  repeat; background-size: 10px 20px;
> k. background-repeat:repeat round ; background-size: 10px 20px;
> l. background-repeat:round  round ; background-size: 10px 20px;
>
> Which of those preserves the image's intrinsic aspect ratio?

repeat:round does not, in general, ever preserve the aspect ratio.
The only exception to this is when only one direction is round, and
the other direction has size:auto.  You can find this under the
background-size property, below the first block of examples, where it
describes the second and third scaling steps used in determining the
final size of the image.

So, the original aspect ratio is preserved only in a, b, d, and h.

> Which of those preserves a 1:2 aspect ratio?

Same explanation as before.  Assuming that the image doesn't have an
intrinsic 1:2 ratio, none of them preserve a 1:2 aspect ratio on
purpose.

> Which of those ignores aspect ratio when applying round (dimensions are "rounded" independently after a pre-rounded size is computed)?

Explanation was above - repeat:round only pays attention to aspect
ratio when only one of the directions is 'round', and the other
direction is size:auto.

~TJ

Received on Friday, 16 July 2010 20:26:16 UTC