我有一个整页的jssor滑块。当图片缩放为“覆盖”时，如果它们太高，它们会在底部被切断。
我希望能够为每个图像指定它应该是垂直居中还是底部对齐（或默认的顶部对齐），因此我可以确保每个图像的重要部分始终显示。
我在包含vertical-align的{{1}}上尝试了div个样式而没有运气。
然后我尝试计算所需的偏移并将负img应用于太高的图像 - 代码如下。这适用于全宽，但当我将窗口调整到一定宽度以下时，将图片推得太高 - 在底部留下空白区域。我无法弄清楚如何阻止这种情况发生。
有没有人得到这样的工作？我错过了内置的功能吗？
HTML（我只在相关幻灯片上添加show-bottom类）：
margin-topJS：
<div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1200px; height: 900px; display: none;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1200px; height: 900px; overflow: hidden;">
{% for slide in slides %}
<div><img class="slide-image show-bottom" u="image" src="/site_media/{{ slide }}" /></div>
{% endfor %}
</div>
</div>
更新
它似乎与img上的var options = {
$SlideDuration: 700, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideEasing: $JssorEasing$.$EaseInQuart,
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$FillMode: 2, //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var windowWidth = $(window).width();
if (windowWidth) {
var windowHeight = $(window).height();
var originalWidth = jssor_slider1.$OriginalWidth();
var originalHeight = jssor_slider1.$OriginalHeight();
var scaleWidth = windowWidth;
if (originalWidth / windowWidth > originalHeight / windowHeight) {
scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
}
jssor_slider1.$ScaleWidth(scaleWidth);
// I added this bit:
// Adjust vertical alignment
$( '.slide-image.show-bottom').each(function() {
var $this = $(this)
if ($this.height() > windowHeight) {
$this.css('margin-top', windowHeight - $this.height())
}
})
// End vertical alignment
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
集有关。这是jQuery使用.height（）找到的高度，无论jssor应用的实际高度如何。在jssor缩放之后如何获得实际高度？这似乎是关键。
答案 0 :(得分：1)
在jssor滑块中填充和对齐图像的两种方法。
要检索滑块的原始尺寸和缩放尺寸，请使用以下API。
$ScaleWidth() //formerly known as $GetScaleWidth()
//Retrieve scaled width the slider currently displays
$ScaleWidth(width) //formerly known as $SetScaleWidth(width)
//Scale the slider to new width and keep aspect ratio
$ScaleHeight() //formerly known as $GetScaleHeight()
//Retrieve scaled height the slider currently displays
$ScaleHeight(height)
//Scale the slider to new height and keep aspect ratio
$OriginalWidth() //formerly known as $GetOriginalWidth()
//Retrieve original width of the slider
$OriginalHeight() //formerly known as $GetOriginalHeight()
//Retrieve original height of the slider
答案 1 :(得分：0)
如果有人有兴趣，我最终能够用Flexslider做我需要的。
<section id="featured" style="height:900px">
<div class="flexslider" style="max-height: 100%;">
<ul class="slides" style="max-height: 100%;">
{% for slide in slides %}
<li>
<img style="visibility: hidden" src="{{ MEDIA_URL }}{{ slide }}" alt="{{ slide.title }}" title="{{ slide.title }}">
</li>
{% endfor %}
</ul>
</div>
</section>
<script type="text/javascript">
$('.flexslider').flexslider({options});
scaleImages();
$( window ).resize(function() {
setSliderHeight()
scaleImages()
});
function scaleImages() {
var $images = $('.flexslider .slides img');
$images.css("width", '');
$images.css("height", $('#featured').height());
setTimeout(function(){
$images.each(function(){
var $this = $(this);
var parentWidth = $this.parent().width();
var widthDelta = parentWidth - $this.width();
if (widthDelta < 0 ) {
$this.css('margin-top', '');
$this.css('margin-left', widthDelta/2);
} else {
$this.css('margin-left', '');
// scale width (to assimilate 'cover', take this out to 'contain')
if (widthDelta > 0) {
$this.height('auto')
.width(parentWidth);
var heightDelta = $('#home-featured').height() - $this.height();
$this.css('margin-top', heightDelta/2);
widthDelta = parentWidth - $this.width();
if (widthDelta < 0 ) {
$this.css('margin-left', widthDelta / 2)
}
}
}
$images.css('visibility', '');
})}, 100);
}
function setSliderHeight(){
$('#home-featured').height($(window).height());
}
setSliderHeight()
</script>
请注意，由于iOS中的错误以及具有动态内容的元素的vh / vw属性，我使用100vh设置高度，而不是100vh。