jquery - height and wiidth properties not working perfect

Question

I am new in html5 and css.

I am trying to write a small web and i set width and height of my element follow %.

but when i set like this:

#tmainImg  img{
text-align: center;
padding-top:2%;
width: 50%;
height: 56%; }

Height not work, when i try to change "height" - decrease or increase - nothing happen.

But when i change width, both height and width of image change...

but when i set height follow pixel, it's work. But i want a "Responsive Web Design" so i don't wanna use pixel. This is part of my css:

    img {
    border: 3px solid #fff; 
    border-radius: 0.3em 0.3em;
    max-width: 100%;
    max-height: 100%;
}

body {
    text-align: center;
    width: 100%;
    height: 100%;

}  #tmainImg  img{
text-align: center;
padding-top:2%;
width: 50%;
height: 56%; }

My question is: How i can design height and width follow % work perfect?

I am newbie, please help me...

My english bad, thanks for reading! :D

Answer 1

You still need to set some css to div #tmainImg, then you can change width and height for img.

DEMO http://jsfiddle.net/yeyene/TA2c6/

Try to change the img width/height and see.

HTML

<div id="tmainImg">
    <img src="http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg" >
</div>

CSS

#tmainImg{
    float:left;
    width:100%;
    height:100%;    
    background:#dfdfdf;
}
#tmainImg  img{
    float:left;
    text-align: center;
    padding-top:2%;
    width: 50%;
    height: 70%;
}