Question

我已经建立了一个旋转木马，但我想让它具有响应性，所以当我调整窗口大小时，它应该自行调整大小。

我使用以下代码行来设置大小，但我想自己做。

x = &f.x;

Answer 1

这应该有帮助，在调整大小调整函数时会调整所有其他高度和宽度

$( window ).resize(function() {
    slideWidth = $(window).width();
    slideHeight = $(window).height();
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);
    $('#slidesHolder').css('height', slideHeight);
    $('.img_tag').css('height', slideHeight);//change of height of image
    $('.img_tag').css('width', slideWidth);//change width of image
});

同时添加此款式

.slide{
   max-height:100%;
   max-width:100%;
}

Answer 2

查看JSFiddle here

要考虑的关键是构建中任何地方完全没有任何固定的像素定义。显然还有其他一些东西，比如位置和溢出，人们可能希望在一个简单的滑块中看到它，并为了清晰起见将几种颜色添加到幻灯片中。

左右滑动是通过left 100%设置动画来处理的，它从父容器中获取值。

幻灯片尺寸在JS中计算并保持为％。

父.slider类设置为50%，因此当您调整JSFiddle输出面板的大小时，它也会调整大小;然后其余的％样式会在整个滑块中拉伸或拉伸。当与使用％结合使用时，javascript结果是一个滑块，它响应它的父级大小，包括滑动距离。

这可能会进一步整理。我认为可以通过一些思考和重构从JS中删除一些计算。

请注意，html和body标签100％设置只是为了帮助JSFiddle呈现的方式而不是必需的，我只是不想在示例DOM的顶层设置固定像素，你有没有改变它们以查看效果 - 这样JSFiddle面板调整大小工作

如何根据容器尺寸设置宽度和高度？

2 个答案: