Chromeのウィンドウを狭くすると
このように枠と画像の間が開きすぎていまって、醜いです。
これをどうしたら、横幅が変わった時に自動で縦も画像に合わせて、変化させることができるのでしょうか?
どなか、ご伝授お願います
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <script src="jquery-1.8.1.min.js"></script> 5 <script src="jquery.bxslider.min.js"></script> 6 <script> 7 $(function(){ 8 $('.slider').bxSlider({ 9 auto: true, 10 infiniteLoop: true, 11 speed: 1000, 12 maxsliders:3, 13 minsliders:3, 14 moveSlides: 1, 15 slideMargin:30 16 }); 17 }); 18 </script> 19 <link rel="stylesheet" href="jquery.bxslider.css"> 20 <link rel="stylesheet" type="text/css" href="hoge.css" media="all"> 21</head> 22 23 24 25<body> 26<center> 27<!--ここからスライダー画像--> 28 <div id="bxslider"> 29 <ul class="slider"> 30 <li class="slide"><img src="red.png"></li> 31 <li class="slide"><img src="xxxx.png"></li> 32 <li class="slide"><img src="xxxxx.png"></li> 33 <li class="slide"><img src="xxxxxx.png"></li> 34 </ul> 35 </div> 36<!--ここまで--> 37 38</center> 39</body> 40</html>
CSS
1* { 2 margin:0; 3 padding:0; 4} 5 6html { 7 width:100%; 8 height:100%; 9} 10 11body { 12 height:100%; 13 padding:100px; 14 background-image:url("xxx.png"); 15 background-repeat:repaet; 16} 17 18li.slide { 19 position:relative; 20 width: auto; 21 height: 40em; 22} 23 24li.slide img { 25 border:5px #ffffff solid; 26 border-radius:10px; 27 position: absolute; 28 left:0; 29 right:0; 30 top:0; 31 bottom:0; 32 margin: auto; 33} 34.slider { 35 height: auto; 36 list-style: none; 37 margin: 0; 38 padding: 0; 39} 40
jquery
1.bx-wrapper { 2 width:auto; 3 height;auto; 4 position: relative; 5 margin: 0 auto 60px; 6 padding: 0; 7 *zoom: 1; 8} 9 10.bx-wrapper img { 11 max-width: 100%; 12 display: block; 13} 14 15/** THEME 16===================================*/ 17.bx-wrapper .bx-viewport { 18 -moz-box-shadow: 0 0 5px #ccc; 19 -webkit-box-shadow: 0 0 5px #ccc; 20 box-shadow: 0 0 5px #ccc; 21 border: 5px solid #fff; 22 left: -5px; 23 padding:0px; 24 background-color: rgba(0,0,0,0.15); 25 26 /*fix other elements on the page moving (on Chrome)*/ 27 -webkit-transform: translatez(0); 28 -moz-transform: translatez(0); 29 -ms-transform: translatez(0); 30 -o-transform: translatez(0); 31 transform: translatez(0); 32} 33 34.bx-wrapper .bx-pager, 35.bx-wrapper .bx-controls-auto { 36 position: absolute; 37 bottom: -30px; 38 width: 100%; 39} 40 41あとは全部公式のソースと同じです。
あなたの回答
tips
プレビュー