Skaluj element div, aby zmieścił się w oknie, ale zachowaj proporcje.

Question

W jaki sposób mogę przeskalować element div, aby zmieścił się w porcie przeglądarki, ale zachował proporcje elementu div. Jak mogę to zrobić za pomocą CSS i/lub JQuery?

Dzięki!

Answer 1

Jest to możliwe z JQuery i odrobiną matematyki.

Użyj JQuery, aby uzyskać szerokość i wysokość portów widoków oraz bieżące wymiary elementów div.

$(document).width(); 

Obliczyć bieżący współczynnik proporcji div. np. szerokość/wysokość

Potrzebujesz trochę logiki, aby określić, czy najpierw ustawić szerokość, czy wysokość, a następnie użyj współczynnika początkowego, aby obliczyć drugą stronę.

Answer 2

jQuery ma wtyczkę, która powiększa obiekt, dopóki jedna z jego stron nie osiągnie określonej wartości px. Połączenie tego będzie wysokości rzutni, możesz rozwinąć dowolny element do tego rozmiaru: jQuery MaxSide.

Answer 3

Podziękowania dla Geoffa za wskazówki dotyczące struktury matematyki i logiki. Oto moja realizacja jQuery, których używam do wielkości schowek, więc wypełnia okno:

var height = originalHeight; 
var width = originalWidth; 
aspect = width/height; 

if($(window).height() < $(window).width()) { 
    var resizedHeight = $(window).height(); 
    var resizedWidth = resizedHeight * aspect; 
} 

else { // screen width is smaller than height (mobile, etc) 
    var resizedWidth = $(window).width(); 
    var resizedHeight = resizedWidth/aspect;  
} 

To działa dobrze dla mnie w tej chwili w całej laptop i telefon ekranem rozmiarach.

Answer 4

Do tego nie potrzebujesz javascript. Możesz użyć czystego CSS.

Procent wypełnienia jest interpretowany względem bloku zawierającego width. Połącz go z pozycją: absolute na elemencie child, a możesz umieścić prawie wszystko w pudełku, który zachowuje proporcje.

HTML:

<div class="aspectwrapper"> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.aspectwrapper { 
    display: inline-block; /* shrink to fit */ 
    width: 100%;   /* whatever width you like */ 
    position: relative; /* so .content can use position: absolute */ 
} 
.aspectwrapper::after { 
    padding-top: 56.25%; /* percentage of containing block _width_ */ 
    display: block; 
    content: ''; 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */ 
    outline: thin dashed green;   /* just so you can see the box */ 
} 

display: inline-block pozostawia trochę dodatkowego miejsca poniżej dolnej krawędzi okna .aspectwrapper, więc kolejny element pod nim nie będzie działał przeciwko nim równo . Użycie display: block pozbędzie się go.

Dzięki this post za napiwek!

---

Inne podejście opiera się na fakcie, że przeglądarki respektują proporcje obrazu podczas zmiany rozmiaru tylko jego szerokości lub wysokości. (Dam google wygenerować przezroczysty obraz 16x9 dla celów demonstracyjnych, ale w praktyce byłoby użyć własnego obrazu statycznego).

HTML:

<div class="aspectwrapper"> 
    <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" /> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.aspectwrapper { 
    width: 100%; 
    position: relative; 
} 
.aspectspacer { 
    width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */ 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    outline: thin dashed green; 
}