Как установить ширину и высоту в соответствии с размерами контейнера?

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

Answer 2

взглянуть на JSFiddle here

Ключевым моментом является полное отсутствие каких-либо фиксированных определений пикселей в любом месте сборки. Очевидно, что есть другие вещи, такие как положение и переполнение, которые можно было бы увидеть в простом слайдере и несколько цветов, добавленных в слайды для ясности.

Раздвижные левые и правые обрабатываются путем анимации left по 100%, которая берет его значение из родительского контейнера.

Размеры слайдов рассчитываются в JS и сохраняются как%.

Родительский класс .slider имеет значение 50%, поэтому при изменении размера панели вывода JSFiddle она также изменяется; то остальные% стилей ударяются по всему ползунку, сквозит или растягивается. В сочетании с использованием% является javascript, результатом является слайдер, отвечающий его размеру родителя, включая его слайд-расстояния.

Это, вероятно, можно убрать дальше. Я думаю, что некоторые вычисления можно было бы удалить из JS с небольшим количеством мыслей и рефакторинга.

Пожалуйста, обратите внимание, что настройки 100% и тегов тегов были просто введены, чтобы помочь с использованием метода JSFiddle и не нужны, я просто не хотел устанавливать фиксированные пиксели на верхнем уровне примера DOM и вы изменили их, чтобы увидеть эффект - таким образом, размер панели JSFiddle изменяется