I am using graphic Banner on the home page. I want to use one image which I want to be responsive.

Right now I have this css in place:

#banner_slides{   
   position: relative;
   margin:0 auto;
   width:100%;   
}     

.oneByOneSlide{   
   margin: 0;
   width: 100%;
   height: 360px;
   background: #fff;   
   position: relative;
   overflow: hidden;
}   

#banner_slides .oneByOne_item{
   position: absolute;
   width: 100%;
   height: 360px; 
   overflow: hidden; 
}         

Tried to make banner responsive with changing the width to 100% which is working ok. The problem is height. When I change height from 360px to auto or disable that parameter the banner wouldn't show up.

Can somebody please take a look why is this happening?

Thank you,
nprosen