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图像调整为非常小的尺寸

回答

相关问题