CODEWITHSUNDEEP
htmlcss
Princess Toledo
Princess Toledo

Reputation: 99

CSS: Auto resize of height

Is there a way how to auto resize the height of an image using CSS?

I have a menu in left side of the website. Image size is 216 x 504.

The width is okay but the height of the image will be auto resized depends on the monitor screen resolution.

Here's my HTML:

<div class="menu-bg">
<img src="image/bg_menu.png" alt=""  />
</div>

Here's my css:

.menu-bg
{
    position:absolute;
    top:130px;
    left:0px;
    height: auto;
}

The height: auto; is not working. I already tried to google but the result is always the height:auto which is not working. I'm using Mozilla Firefox as a browser.

Any comments are appreciated.

Thank you

Upvotes: 3

Views: 30748

Answers (6)

Johannes
Johannes

Reputation: 67778

For an element with position: absolute you have to define at least a width or height, in px or %, but a percentage value only if the parent element has a definition for that parameter - auto width will always be 100%, but auto for height without a height setting for the parent element won't work.

Upvotes: 1

Federico
Federico

Reputation: 1251

did you try this:

.menu-bg{
    position:absolute;
    top:130px;
    left:0px;
    height: auto;
    border:2px solid red;

    width:216px;
    max-height:504px;
    height:80%;
}
.menu-bg img{
    width:100%;
    height:100%;
}

the "height:80%" can be adjusted to your needs...;

Upvotes: 0

SAFEER N
SAFEER N

Reputation: 1197

try this jquery

$(document).ready(function() {
    var height = $(window).height();
    $('.menu-bg').css('height',height);
});

Upvotes: 1

NorthVodka
NorthVodka

Reputation: 1

Try this:

.menu-bg {
height:100%; /* remove this if it doesn't work at first */
position:absolute;
top:130px;
left:0px;
}

.menu-bg img {
height:auto;
}

Upvotes: 0

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1301

You can use media queries to control the height of the image according to resolution. You would go about using the max-height property.

Upvotes: 0

majorhavoc
majorhavoc

Reputation: 2415

.menu-bg img{ height:auto; } Use this css and try

What you are doing is giving an auto height to the container not to the image.

Upvotes: 3

Related Questions