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

Question

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

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

https://jsfiddle.net/6nhuk7vm/4/

var slideWidth = 1200;
var slideHeight = 300;
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slidesHolder').css('height', slideHeight);

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%;
}