Zastosowanie CSS (i być może JavaScript), aby elementem być kwadratowy (lub utrzymania określonej proporcji)

Question

Mam div, który chcę mieć następujące cechy:

• width = 50% swojego rodzica element
• Wysokość równa z tym, co musi być, aby zachować określony współczynnik proporcji.

Potrzebuję użyć wartości procentowych, ponieważ obiekt zmieni rozmiar po lewej stronie po zmianie rozmiaru przeglądarki. Chcę, aby obiekt był zmieniany z góry na dół, aby obiekt zachowywał ten sam współczynnik proporcji.

Nie sądzę, że jest jakiś sposób na użycie czystego CSS, ale czy ktoś zna jakiś sposób? Czy można to zrobić w łatwy sposób w JavaScript? (JQuery ma się dobrze.)

Answer 1

I zorientowali się, jak to zrobić bez js, choć trzeba użyć przejrzysty obraz.

tworzą strukturę HTML jak:

<div class="rect_container"><img class="rect_image" src="rect_image.png"/> 
<div class="rect">Your favorite content here</div> 
</div> 

Użyć aXb przezroczysty PNG rect_image gdzie AxB jest proporcje.

Tymczasem założyć stylów jak:

.rect_container {width: 50%; position: relative;} 
.rect_image {width: 100%; display: block;} 
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;} 

Ważną rzeczą jest wykorzystanie faktu, że obrazy zachowują proporcje kiedy zmieniany w jednym kierunku. W międzyczasie potrzebujemy użytecznego div, więc tworzymy obraz jako blok, zawijamy go w div i umieszczamy w nim absolutnie umiejscowiony div. Destylowałem ten kod z czegoś bardziej skomplikowanego, co faktycznie testowałem. Działa jak marzenie.

Answer 2

Proszę bardzo: Detecting a browser resize using JQuery.

Answer 3

jQuery brzmi całkiem łatwo. Ustaw 50% szerokości w CSS, a następnie następuje:

function onResize() { 
    var el = $('#element'); 
    el.height(el.width()); 
} 
$(window).resize(onResize); 
$(document).ready(onResize); 

Answer 4

Oto czysta wersja CSS bez znacznika IMG:

<div class="apple_container"><div class="apple_icon"></div></div> 

SCSS (m.in. kompas, aby uczynić background-size):

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    @include background-size(contain); 
    background-position: center center; 
} 

CSS generowany z powyższego:

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    background-position: center center; 
} 

Wyniki w kwadratowym elemencie z obrazem tła, wyśrodkowanym i dopasowanym w nim. Jest to przydatne w przypadku elementów responsywnych, które mają być skalowane zależnie od urządzenia użytkownika.