Come impostare la larghezza e l'altezza in base alle dimensioni del contenitore?

Question

Ho costruito un carosello ma voglio renderlo reattivo, quindi quando ridimensiono la finestra dovrebbe ridimensionarsi.

Sto usando le seguenti righe di codice dove ho impostato le dimensioni ma voglio farlo da solo.

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

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

Answer 1

Questo dovrebbe aiutare, sul ridimensionamento Attiva una funzione che regola tutti gli altri l'altezza e la larghezza

$(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 
}); 

aggiungere anche questo stile

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

Answer 2

Date un'occhiata allo JSFiddle here

La cosa fondamentale da prendere è la completa mancanza di definizioni fisse di pixel in qualsiasi punto della generazione. Ovviamente ci sono altre cose, come la posizione e l'overflow che ci si aspetterebbe di vedere in un semplice cursore e diversi colori aggiunti alle diapositive per chiarezza.

verso sinistra e destra è gestita da animare left da 100% che prende il suo valore dal contenitore padre.

Le dimensioni delle diapositive sono calcolate in JS e mantenute anche in%.

La classe madre .slider è impostata su 50% così quando ridimensionate il pannello di output JSFiddle viene ridimensionato anche; poi il resto degli stili% calcia l'intera barra di scorrimento o tratti. Se abbinato all'uso di% è la javascript, il risultato è un dispositivo di scorrimento che risponde alla sua dimensione padre includendo le distanze di scorrimento.

Questo può probabilmente essere riordinato ulteriormente. Penso che parte del calcolo possa essere rimosso dal JS con un po 'di pensiero e refactoring.

Si prega di notare che le impostazioni html e body del 100% sono state appena inserite per facilitare il rendering di JSFiddle e non sono necessarie, semplicemente non volevo impostare i pixel fissi al livello più alto del DOM di esempio e li hai modificati per vedere l'effetto - in questo modo la ridimensionamento del pannello JSFiddle funziona