我想通过窗口高度+全宽度来固定高度。 例如尺寸为 2600x1800 的图片。 窗口尺寸为 950x450。
我调用 ScaleSlider() 函数并在内部:
当我使用
$ScaleWidth(width)时，高度为 1800。当我使用
$ScaleHeight(height)时，高度没问题，但宽度会缩放至 cca 800。
我使用了配置参数 $FillMode: 从 0 到 5，但没有达到预期的结果。
我不需要宽高比或比例。对我来说没问题，图像的高度就像被切割一样。
当我使用以下代码对 IMG 标记进行编码时，它按预期工作:object-fit: cover;width: 100%;height: 100%; 然后将所有内容都设置为 100%，然后是父类 slider_container设置为变换:scale(1)；高度:450px。调整浏览器大小后，一切都再次损坏。
请问如何用jssor做到这一点？
最佳答案
新的全屏示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Full Screen Slider - Jssor Slider</title>
<style>
html, body {
/*position: fixed;*/
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body style="font-family: Arial, Verdana, Sans-Serif;">
<script type="text/javascript" src="../js/jssor.slider-25.0.6.min.js"></script>
<script>
jssor_slider1_init = function () {
var options = {
$AutoPlay: 0, //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
$Idle: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[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
$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 $Cols is greater than 1, or parking position is not 0)
$ArrowKeyNavigation: 1, //[Optional] Steps to go for each navigation request by pressing arrow key, default value is 1.
$SlideDuration: 800, //Specifies default duration (swipe) for slide in milliseconds
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2 //[Required] 0 Never, 1 Mouse Over, 2 Always
}
};
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 resizing
function ScaleSlider() {
var parentNode = jssor_slider1.$Elmt.parentNode;
var parentWidth = parentNode.clientWidth;
if (parentWidth) {
var parentHeight = parentNode.clientHeight;
jssor_slider1.$ScaleSize(parentWidth, parentHeight);
}
else {
$Jssor$.$Delay(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<!-- Jssor Slider Begin -->
<div style="position:relative;top:0;left:0;width:100%;height:100%;overflow:hidden;">
<div id="slider1_container" style="margin: 0 auto; position: relative; top: 0px; left: 0px; width: 800px;
height: 356px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('../img/loading.gif') no-repeat 50% 50%; background-color: rgba(0, 0, 0, .7);"></div>
<!-- Slides Container -->
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;">
<div>
<img u="image" src="../img/alila/01.jpg" />
</div>
<div>
<img u="image" src="../img/alila/02.jpg" />
</div>
<div>
<img u="image" src="../img/alila/03.jpg" />
</div>
<div>
<img u="image" src="../img/alila/04.jpg" />
</div>
<div>
<img u="image" src="../img/alila/05.jpg" />
</div>
<div>
<img u="image" src="../img/alila/06.jpg" />
</div>
<div>
<img u="image" src="../img/alila/07.jpg" />
</div>
<div>
<img u="image" src="../img/alila/08.jpg" />
</div>
<div>
<img u="image" src="../img/alila/09.jpg" />
</div>
<div>
<img u="image" src="../img/alila/10.jpg" />
</div>
<div>
<img u="image" src="../img/alila/11.jpg" />
</div>
<div>
<img u="image" src="../img/alila/12.jpg" />
</div>
</div>
<!--#region Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url(../img/a17.png) no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="top: 158px; right: 8px">
</span>
<!--#endregion Arrow Navigator Skin End -->
<!-- Trigger -->
<script>
jssor_slider1_init();
</script>
</div>
</div>
<!-- Jssor Slider End -->
<!-- remove the following if no need-->
<p>other content</p>
</body>
</html>
关于javascript - 如何在Jssor中按窗口大小显示全宽+高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44421716/