Jquery 高度和宽度属性工作不完美

我是html5和css的新手。 我试图写一个小网站，我设置了我的元素宽度和高度。 但当我这样设置时：

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

高度不工作，当我试图改变“高度”-减少或增加-什么也没有发生。 但当我改变宽度时，图像的高度和宽度都会改变。。。 但当我设置高度跟随像素时，这就是工作。但我想要一个“响应性网页设计”，所以我不想使用像素。 这是我的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%; }

我的问题是：我如何设计高度和宽度符合%完美工作？ 我是新手，请帮帮我。。。

---

我的英语不好，谢谢阅读D

您仍然需要将一些css设置为div

#tmainImg

，然后您可以更改

img

的宽度和高度

演示

尝试更改img宽度/高度，然后查看

HTML

---

请张贴相关的html代码以及。如果你能对你的问题做一个总结，那也很好。

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

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