CSS Auto resize menu coding for reference

Asked By 0 points N/A Posted on -

I am not an expert in CSS coding but can understand the coding a bit, can anyone help me by sending me the css auto resize menu coding.

Best Answer by Luker Malcom
Best Answer
Best Answer
Answered By 5 points N/A #157137

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.

    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.

Answered By 0 points N/A #157138

CSS Auto resize menu coding for reference


Hellow Fox Riley,

I have realized the matter of your concentrations.

As a web Designer I want to suggest you to use the following CSS3 properties:

resize: none or both or horizontal or vertical

For example: The division can be resized as:


The resize property is supported in Firefox 4++,Safari,Chrome.

The resizing code for javascript:object.style.resize="both"

I hope you will understand .

Thanking you

Shifflett Laurel

Answered By 15 points N/A #157140

CSS Auto resize menu coding for reference

Here’s a detailed solution for this one.  
First program your menu box similar to this one:
    <div id="YourMenuBoxContainer">  
        <div id="MBox1"></div>
        <div id="MBox2"></div>
        <div id= MBox3"></div>
Here’s how should your CSS be programmed to make YourMenuBoxContainer aturo resize :
#YourMenuBoxContainer {
    margin: 0px auto 10px auto;
    text-align: left;
#MBox3 {
    width: 120px;
    height: 120px;
    background: #cacaca;
    display: inline-block;
Setting your display property to inline-block should resize your menu according to the size of your screen.

Login/Register to Answer

Related Questions