뭐든지 슬라이더 - 캡션이있는 다른 크기의 이미지 사용

Question

아무나 슬라이더를 사용하고 있으며 동일한 크기로 표시 할 이미지를 얻을 수 없습니다. 다른 크기의 이미지 5 개를 사용하고 있습니다. 뷰포트에 가운데 놓이지도 않습니다.

나는 모두 HTML에서 같은 크기로 크기를 조정하고 CSS의 요소도 변경했으나이를 처리하는 가장 좋은 방법은 분실되었다. 나는 내가 생각할 수있는 모든 것을 시도했지만 뭔가를 놓치고있다. 나는 여전히 프로그래밍에 익숙하지 않으므로 모든 지침을 이해할 수 있습니다.

<ul id="slider3">  
    <li><a href="summer2008.asp"><img src="http://www.themusicshop.com/images/FinnianRainbowWeb.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Sing-Dance-Act & Much More!</div></li>   
    <li><a href="thedailyjoe.asp"><img src="http://www.themusicshop.com/images/DailyJoeBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Now Serving Breakfast & Lunch</div></li> 
    <li><a href="plessons.asp"><img src="http://www.themusicshop.com/images/LessonsBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Private Lessons for All Ages - All Instruments!</div></li> 
    <li><a href="aeRntplan.aspx"><img src="http://www.themusicshop.com/images/RentalBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Rent Online in 4 Easy Steps</div></li>    
    <li><a href="t-store.aspx"><img src="http://www.themusicshop.com/images/StoreBanner.jpg" alt="" width="400" height="250"></a><div class="caption-bottom">Shop Online</div></li> 

</ul> 

CSS :

/* 
AnythingSlider v1.8+ Default theme 
By Chris Coyier: http://css-tricks.com 
with major improvements by Doug Neiner: http://pixelgraphics.us/ 
based on work by Remy Sharp: http://jqueryfordesigners.com/ 
    */ 

/***************************** 
    SET DEFAULT DIMENSIONS HERE 
*****************************/ 
/* New in version 1.7+ */ 
#slider3, slider3 li { 
    width: 600px; 
    height: 350px; 
    list-style: none; 
} 
/* images with caption */ 
#slider3 img { 
    width: 100%; 
    height: 100%; 
} 
/* position the panels so the captions appear correctly */ 
#slider3 .panel { position: relative; } 
/* captions */ 
#slider3 .caption-top, #slider3 .caption-right, 
#slider3 .caption-bottom, #slider3 .caption-left { 
    background: #000; 
    color: #fff; 
    padding: 10px; 
    margin: 0; 
    position: relative; 
    z-index: 10; 
    opacity: 0.65; 
    filter: alpha(opacity=80); 
} 
/* Top caption - padding is included in the width (480px here, 500px in the script), same for height */ 
#slider3 .caption-top { 
    left: 0; 
    top: 0; 
    width: 580px; 
    height: 30px; 
} 
/* Right caption - padding is included in the width (130px here, 150px in the script), same for height */ 
#slider3 .caption-right { 
right: 0; 
bottom: 0; 
width: 130px; 
height: 180px; 
} 
/* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */ 
#slider3 .caption-bottom { 
    left: 0; 
    bottom: 0; 
    width: 580px; 
    height: 30px; 
} 
/* Left caption - padding is included in the width (130px here, 150px in the script), same for height */ 
#slider3 .caption-left { 
    left: 0; 
    bottom: 0; 
    width: 130px; 
    height: 180px; 
} 
/* Caption close button */ 
.caption-top .close, .caption-right .close, 
.caption-bottom .close, .caption-left .close { 
    font-size: 80%; 
    cursor: pointer; 
    float: right; 
    display: inline-block; 
} 

/****************** 
    SET STYLING HERE 
****************** 
================================= 
Default state (no keyboard focus) 
==================================*/ 
/* Overall Wrapper */ 
.anythingSlider-default { 
margin: 0 auto; 
/* 45px right & left padding for the arrows, 28px @ bottom for navigation */ 
padding: 0 45px 28px 45px; 
} 
/* slider window - top & bottom borders, default state */ 
.anythingSlider-default .anythingWindow { 
border-top: 3px solid #777; 
border-bottom: 3px solid #777; 
} 
/* Navigation buttons + start/stop button, default state */ 
.anythingSlider-default .anythingControls a { 
/* top shadow */ 
background: #777 url(../images/default.png) center -288px repeat-x; 
color: #000; 
border-radius: 0 0 5px 5px; 
-moz-border-radius: 0 0 5px 5px; 
-webkit-border-radius: 0 0 5px 5px; 
} 
/* Make sure navigation text is visible */ 
.anythingSlider-default .anythingControls a span { 
visibility: visible; 
} 
/* Navigation current button, default state */ 
.anythingSlider-default .anythingControls a.cur { 
background: #888; 
color: #000; 
} 
/* start-stop button, stopped, default state */ 
.anythingSlider-default .anythingControls a.start-stop { 
background-color: #040; 
color: #ddd; 
} 
/* start-stop button, playing, default state */ 
.anythingSlider-default .anythingControls a.start-stop.playing { 
background-color: #800; 
} 
/* start-stop button, default hovered text color (when visible) */ 
/* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ 
.anythingSlider-default .anythingControls a.start-stop:hover, .anythingSlider-default  .anythingControls a.start-stop.hover, .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover { 
background-image: none; 
color: #ddd; 
} 
/* 
================================= 
Active State (has keyboard focus) 
================================= 
*/ 
/* slider window - top & bottom borders, active state */ 
.anythingSlider-default.activeSlider .anythingWindow { 
border-color: #7C9127; 
} 
/* Navigation buttons, active state */ 
.anythingSlider-default.activeSlider .anythingControls a { 
/* background image = top shadow */ 
background-color: #7C9127; 
} 
/* Navigation current & hovered button, active state */ 
.anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider- default.activeSlider .anythingControls a:hover { 
/* background image removed */ 
background: #7C9127; 
} 
/* start-stop button, stopped, active state */ 
.anythingSlider-default.activeSlider .anythingControls a.start-stop { 
background-color: #080; 
color: #fff; 
} 
/* start-stop button, playing, active state */ 
.anythingSlider-default.activeSlider .anythingControls a.start-stop.playing { 
background-color: #d00; 
color: #fff; 
} 
/* start-stop button, active slider hovered text color (when visible) */ 
.anythingSlider-default.activeSlider .start-stop:hover, .anythingSlider- default.activeSlider .start-stop.hover { 
color: #fff; 
} 
/************************ 
    NAVIGATION POSITIONING 
************************/ 
/* Navigation Arrows */ 
.anythingSlider-default .arrow { 
top: 50%; 
position: absolute; 
display: block; 
} 
.anythingSlider-default .arrow a { 
display: block; 
width: 45px; 
height: 140px; 
margin: -70px 0 0 0; /* half height of image */ 
text-align: center; 
outline: 0; 
background: url(../images/default.png) no-repeat; 
} 
/* back arrow */ 
.anythingSlider-default .back { 
left: 0; 
} 
.anythingSlider-default .back a { 
background-position: left top; 
} 
.anythingSlider-default .back a:hover, .anythingSlider-default .back a.hover { 
background-position: left -140px; 
} 
/* forward arrow */ 
.anythingSlider-default .forward { 
right: 0; 
} 
.anythingSlider-default .forward a { 
background-position: right top; 
} 
.anythingSlider-default .forward a:hover, .anythingSlider-default .forward a.hover { 
background-position: right -140px; 
} 
/* Navigation Links */ 
.anythingSlider-default .anythingControls { 
outline: 0; 
display: none; 
} 
.anythingSlider-default .anythingControls ul { 
margin: 0; 
padding: 0; 
float: left; 
} 
.anythingSlider-default .anythingControls ul li { 
display: inline; 
} 
.anythingSlider-default .anythingControls ul a { 
font: 11px/18px Georgia, Serif; 
display: inline-block; 
text-decoration: none; 
padding: 2px 8px; 
height: 18px; 
margin: 0 5px 0 0; 
text-align: center; 
outline: 0; 
} 
/* navigationSize window */ 
.anythingSlider-default .anythingControls .anythingNavWindow { 
overflow: hidden; 
float: left; 
} 
/* Autoplay Start/Stop button */ 
.anythingSlider-default .anythingControls .start-stop { 
padding: 2px 5px; 
width: 40px; 
text-align: center; 
text-decoration: none; 
float: right; 
z-index: 100; 
outline: 0; 
} 
/*********************** 
    IE8 AND OLDER STYLING 
***********************/ 

/* Navigation Arrows */ 
.as-oldie .anythingSlider-default .arrow { 
top: 30%; 
} 
.as-oldie .anythingSlider-default .arrow a { 
margin: 0; 
} 
/* margin between nav buttons just looks better */ 
.as-oldie .anythingSlider-default .anythingControls li { 
margin-left: 3px; 
} 
/* When using the navigationSize option, the side margins need to be zero 
None of the navigation panels look good in IE7 now =(*/ 
.as-oldie .anythingSlider-default .anythingControls a { 
margin: 0; 
} 
.as-oldie .anythingSlider-default .anythingNavWindow { 
margin: 0 2px; 
} 
.as-oldie .anythingSlider-default .anythingNavWindow li { 
padding: 3px 0 0 0; 
} 
/*********************** 
    COMMON SLIDER STYLING 
***********************/ 
/* Overall Wrapper */ 
.anythingSlider { 
display: block; 
overflow: visible !important; 
position: relative; 
} 
/* anythingSlider viewport window */ 
.anythingSlider .anythingWindow { 
overflow: hidden; 
position: relative; 
width: 100%; 
height: 100%; 
} 
/* anythingSlider base (original element) */ 
.anythingSlider .anythingBase { 
background: transparent; 
list-style: none; 
position: absolute; 
overflow: visible !important; 
top: 0; 
left: 0; 
margin: 0; 
padding: 0; 
} 
/* Navigation arrow text; indent moved to span inside "a", for IE7; 
    apparently, a negative text-indent on an "a" link moves the link as well as the text */ 
.anythingSlider .arrow span { 
display: block; 
visibility: hidden; 
} 
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ 
.anythingSlider .arrow.disabled { 
display: none; 
} 
/* all panels inside the slider; horizontal mode */ 
.anythingSlider .panel { 
background: transparent; 
display: block; 
overflow: hidden; 
float: left; 
padding: 0; 
margin: 0; 
} 
/* vertical mode */ 
.anythingSlider .vertical .panel { 
float: none; 
} 
/* fade mode */ 
.anythingSlider .fade .panel { 
float: none; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 0; 
} 
/* fade mode active page - visible & on top */ 
.anythingSlider .fade .activePage { 
z-index: 1; 
} 
/*********************** 
    RTL STYLING 
***********************/ 
/* slider autoplay right-to-left, reverse order of nav links to look better */ 
.anythingSlider.rtl .anythingWindow { 
direction: ltr; 
unicode-bidi: bidi-override; 
} 
.anythingSlider.rtl .anythingControls ul { 
float: left; 
} /* move nav link group to left */ 
.anythingSlider.rtl .anythingControls ul a { 
float: right; 
} /* reverse order of nav links */ 
.anythingSlider.rtl .start-stop { /* float: right; */ 
} /* move start/stop button - in case you want to switch sides */ 
/* probably not necessary, but added just in case */ 
.anythingSlider, .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a,  .anythingSlider .arrow a, .anythingSlider .start-stop { 
transition-duration: 0s; 
-o-transition-duration: 0s; 
-moz-transition-duration: 0s; 
-webkit-transition-duration: 0s; 
} 

Answer 1

당신이 100 % 확실하지 싶어하고있어,하지만 this demo에서 http://jsfiddle.net/5Kvf5/

HTML - 여기

http://themusicshop.com/defaultdave3.aspx는 바이올린의 이미지는 가운데에 맞춰지며 (크기는 조정되지 않음) :

012 전체 슬라이더 래퍼를 추가, 창 크기를 조정하기 : 3,516,

HTML 템플릿

<ul id="slider3"> 
    <li> 
     <div> 
      <a href="page1.asp"> 
       <img src="image1.jpg" alt="" width="400" height="250"> 
      </a> 
      <div class="caption-bottom">Caption 1</div> 
     </div> 
    </li> 
    ... 
</ul> 

CSS

/* 
    centering css from here: 
    http://css-tricks.com/centering-in-the-unknown/ 
*/ 
ul#slider3 div { 
    text-align: center; 
} 
ul#slider3 div:before { 
    content:''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
ul#slider3 img { 
    display: inline-block; 
    vertical-align: middle; 
} 

스크립트

---

업데이트

showCaptions = function ($this) { 
    $this.find('.caption-bottom') 
     .show() 
     .animate({ 
      bottom: 0, 
      opacity: 1 
     }, 400); 
}; 
hideCaptions = function ($this) { 
    $this.find('.caption-bottom') 
     .stop() 
     .animate({ 
      bottom: -50, 
      opacity: 0 
     }, 350, function() { 
      $this.find('.caption-bottom').hide(); 
     }); 
}; 

$('#slider3') 
    .anythingSlider() 
    /* this code will make the caption appear when you hover over the panel 
    remove the extra statements if you don't have captions in that location */ 
    .find('.panel') 
    .find('div[class*=caption]').css({ 
     position: 'absolute' 
    }).end() 
    .hover(function() { 
     showCaptions($(this)) 
    }, function() { 
     hideCaptions($(this)); 
    }); 

// hide all captions initially 
hideCaptions($('#slider3 .panel')); 

를 (이미지를 중앙에) 최대 크기 크기를 설정 한 다음 expand 및을 포함하십시오.옵션 ( updated demo) :

CSS

.wrapper { 
    width: 100%; 
    height: 500px; 
} 

수정 된 스크립트

$('#slider3') 
    .anythingSlider({ 
     expand: true, 
     aspectRatio : 600/350 
    })