Get Percentage Height To Work on Li Elements And Maintain Image Aspect Ratio Inside Li Elements

[Liagapi]

I have a responsive web page where there are images inside a horizontal unordered list. I want my web page to shrink/stretch when the page resolution changes so I did not set the width or height of any page elements using pixels. Below are my media query and markup:

media screen and (min-width: 320px) {
html, body{width:100%;height:100%;}
#banner{width:100%;height:10%; border:1px solid blue}
#largeImage{width:100%;height:70%; border:1px solid blue}
#picsContainer{width:100%;height:10%; border:1px solid blue}
img{width:100%;height:auto}
ul{list-style:none}
ul li{width:10%;height:100%; display:inline-block; border:1px solid blue}
footer{width:100%;height:10%;border:1px solid blue}
}

---

            *   ![image1](pic/img1.jpg)
            *   ![image2](pic/img2.jpg)
            *   ![image3](pic/img3.jpg)
            *   ![image4](pic/img4.jpg)
            *   ![image5](pic/img5.jpg)
            *   ![image6](pic/img6.jpg)
            
        

    

    

       Footer

I have just two questions: 1 - How do I get height:100% to work on ul li elements without giving a pixel width to their parent or grand parent? 2 - How do I maintain aspect ratio for images inside li elements?