jquery - bxslider 图像调整到非常小的尺寸

Question

我正在使用 foundation 5 来构建响应式网站。我正在使用 bxslider 设置响应式幻灯片。桌面图像尺寸为 1800X500。问题出在移动设备屏幕上，当浏览器为移动设备调整大小时，图像会调整大小并被裁剪得非常小。

我想解决以下问题:a) 我还在 slider 上放置了一个带有文本框和提交按钮的透明 div。透明的 div 也无法在移动设备上正确显示。

b) 对于移动设备，我希望图像高度至少为 400 像素(透明 div 正确居中)。

c) 使 bxslider 图像全宽 (1800px) 桌面/笔记本电脑

<div class="row">
        <ul class="slide1" style="margin:0px;padding:0px;">
              <li>
                    <img src="img/3.jpg" /> 
                                <div class="caption1">  
                                        <form class="transparent" style="background-image:url(img/top.jpg);display:block;">
                                            <h6 style="color:white;margin-left:15%;padding-top:3px;">WEDDING PLANNING MADE EASY </h6>
                                            <div class="row" >
                                                    <div class="large-6 small-12 large-centered small-centered columns">    
                                                        <div class="row collapse postfix-round">
                                                            <div class="small-9 columns">
                                                                <input type="text" placeholder="Select Category" />                                                         
                                                            </div>                                                          
                                                            <div class="small-3 columns">
                                                                <a href="#" class="button postfix">Go</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                        </form>
                                 </div>           
              </li>
              <li><img src="img/4.jpg" /> </li>
              <li><img src="img/1.jpg" /></li>            
              <li><img src="img/2.jpg" /></li>            
        </ul>
        </div>

       ***CSS:***

/**************** transparent image ******************/
.transparent{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";       /* IE 8 */
filter: alpha(opacity=70);  /* IE 5-7 */
-moz-opacity: 0.7;          /* Netscape */
-khtml-opacity: 0.7;        /* Safari 1.x */
opacity: 0.7;               /* Good browsers */
}
/**************** transparent image ******************/

/********** position bx slider caption  ***********/
.caption1 {
position:absolute;
    bottom:15%;
    left:35%;
    z-index:10;
    width: 40%;
   color:white;
    /*background: none repeat scroll 0% 0% rgba(80, 80, 80, 0.75);
    background-color: rgba(80, 80, 80, 0.75);*/
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;`

Answer 1

#about{


    width:400px; 


    float:left;


}
#slideshow{


    max-width:500px;


    float:left;  
}