CSS Auto resize menu coding for reference

CSS Auto resize menu coding for reference

Hey there,

Auto-resizing in CSS is most likely done to make sure that the page you are creating will fit perfectly on any type of screen resolution. This capability is only supported on CSS3 and since it’s fairly new, older browsers does not support it.

Let us say that you want to resize a background image.

With new development created in CSS3, you can now use ‘background-size’ to make sure that the image will keep its aspect ratios even if its width or height is defined.

Let the length measurement be:

background-size: width height;

Now let’s use it in a CSS3 code.

body{
    background: #000 url(image_200x200.jpg) center center fixed no-repeat;
    background-size: 100px 200px;
}

In the example CSS code above, we have set the width to half of its original size and retain the height. This code can be simplified as:

    background-size: 100px;

This code is identical with the above because it simply infers that without defining the height, CSS3 will automatically assume its on ‘auto’, which is the same size as the image’s original height.
Hope this helps you.