如何使nivo滑块移动友好？

Question

您好我有一个Nivo滑块设置问题。目前我有一个挑战，无法找到合适的解决方案 - 尝试使网页移动设备友好，当我在移动设备上查看时自动调整图像大小。

这是我的代码和我尝试过的，但仍然没有得到我想要的正确结果。有没有人可以帮我这个？不确定哪个部分我做错了。

<div id="banner_image">   
<div id="slider-wrapper">        
<div id="slider" class="nivoSlider">
<img class="innerimage" src="image/1.jpg" alt=""/>
<img class="innerimage"  src="image/2.jpg" alt=""/>
<img class="innerimage"  src="image/3.jpg" alt=""/>
</div>  
</div>  
</div> 

我的CSS：

#banner_image {
width: 1024px;
height: 531px;
float: left;
margin-left: 10px;  
padding: 0 0 0 0;}


#slider-wrapper {
width: 1024px;
height: 531px;
background: transparent;}

#slider {
background: url("../image/loading.gif") no-repeat scroll 50% 50% transparent;
width: 920px;
height: 400px;
position: relative;}

#slider img {
display: none;
left: 0;
position: absolute;
top: 0;}

我用Google搜索并尝试了以下更改，但图片仍然无法在移动设备屏幕上调整大小。如果有人能帮助我理解我做错了什么，我们将不胜感激。谢谢

<!--trying 1 -->
#banner_image, #slider-wrapper, .nivoSlide img{
width:100%; 
height:auto;}
 <!--trying 2 -->
<img class="innerimage"  src="image/1.jpg" width="1024px" alt=""/>
<img class="innerimage"  src="image/2.jpg" width="1024px" alt=""/>
<img class="innerimage"  src="image/3.jpg" width="1024px"  alt=""/>
CSS
#banner_image, #slider-wrapper, .nivoSlide img{
max-width:100%; 
height:auto;}