Konteynır boyutlarına göre genişlik ve yükseklik nasıl ayarlanır?

Question

Bir atlıkarınca oluşturdum ancak pencereyi yeniden boyutlandırdığımda kendini yeniden boyutlandırmalıyım.

Boyutları ayarladığım şu kod satırlarını kullanıyorum ancak bunu kendi başıma yapmak istiyorum.

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

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

Answer 1

Bu fonksiyon

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

Ayrıca, bu stil eklemek diğer tüm yükseklik ve genişlik

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

Answer 2

göz ayarlayan hangi tetiklenir boyutlandırma günü, yardımcı olmalıdır JSFiddle here

Yapılması gereken en önemli şey, yapının herhangi bir yerinde herhangi bir sabit piksel tanımının eksikliğidir. Açıkça görüldüğü gibi, basit bir kaydırıcıda görmeyi umduğu konum ve taşma ve açıklık için slaytlara eklenen birçok renk gibi başka şeyler de vardır.

Sola ve sağa kaydırmak, left'u 100% numarasına göre hareket ettirerek bu öğeyi ana kapsayıcıdan alır.

Slayt boyutları JS cinsinden hesaplanır ve% olarak tutulur.

Ana .slider sınıfı 50% olarak ayarlanmıştır, böylece JSFiddle çıkış panelini yeniden boyutlandırdığınızda yeniden boyutlandırır; Daha sonra,% stillerinin geri kalanı, tüm sürgü kabartmaları tekmele ya da uzanır. % Javascript ile birleştirildiğinde, sonuç kayma mesafeleri de dahil olmak üzere ebeveyn boyutuna yanıt veren bir sürgüdür.

Bu, muhtemelen daha da yukarı çekilebilir. Bence hesaplamaların bir kısmı JS'den biraz düşünceye ve refactoring ile çıkarılabilir.

Lütfen unutmayın, html ve body tag% 100 ayarları JSFiddle'ın oluşturulmasına ve gerekli olmamasına yardımcı olmak için eklenmiştir, sadece örnek DOM'ın en üst düzeyinde sabit pikseller ayarlamak istemedim etkiyi görmek için bunları değiştirdiniz - bu şekilde JSFiddle paneli yeniden boyutlandırılır