bxslider圖像調整爲非常小的尺寸

我正在使用基礎5構建響應式網站。我正在使用bxslider來設置響應式幻燈片。桌面圖像大小爲1800X500。問題在於手機屏幕，調整圖像大小並在瀏覽器調整爲移動時調整爲非常小。bxslider圖像調整爲非常小的尺寸

我想解決以下問題： a）我也放了一個透明的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;`

來源

2015-04-19 royalkazaar

這會有所幫助，如果你把你的問題儘可能的最小化的例子（使用的jsfiddle什麼其他），這樣每個人都可以重新創建你的問題。或者，您可以發佈您的實時預覽。我相信這將有助於獲得一些答案！最好的祝福。 –

#about{ 


    width:400px; 


    float:left; 


} 
#slideshow{ 


    max-width:500px; 


    float:left; 
}

來源

2015-05-21 09:11:31

bxslider圖像調整爲非常小的尺寸

回答

相關問題