Jednostki rzutni, zachowując współczynnik kształtu?

Więc właśnie odkryłem jednostki rzutni i naprawdę chcę ich użyć.Jednostki rzutni, zachowując współczynnik kształtu?

Pierwsze wyzwanie: Mój element ma "rozmiar bazowy" 760x670 pikseli. Chcę użyć rzutni do skalowania, tak aby wysokość wynosiła 100vh, lub szerokość wynosi 100vw, w zależności od tego, która wartość jest mniejsza.

Niestety, chociaż mogę użyć 100vmin, aby uzyskać mniejszy z dwóch, mogę zastosować go do szerokości lub wysokości, a nie do obu.

Obecnie używam:

#root { 
    width: 760px; 
    height: 670px; 
    width: 100vw; 
    height: calc(670vw/760); 
}

To skaluje szerokość do rozmiaru ekranu, w wyniku pionowego przewijania. Nie jest tak źle, ale wolałbym, gdybym był w stanie dopasować go do widocznego obszaru.

Źródło

2013-01-02 Niet the Dark Absol

Testuję w Chrome. Wydaje się, że jednostek 'vw' nie można używać wewnątrz' calc'. Próbowałem takich rzeczy jak 'height: -webkit-calc (100vw/3)'. Jedynymi innymi przeglądarkami obsługującymi jednostki 'calc' i viewport są IE10 i Safari 6, z których żaden nie może być zainstalowany na mojej platformie (Windows 7). –

Przy okazji, powinno to być możliwe w przypadku zapytań o media, ponieważ możesz podać kod oddziału na podstawie współczynnika proporcji, np. '@media all i (min-aspect-ratio: 760/670) {...}'. –

To błąd [WebKit] (https://bugs.webkit.org/show_bug.cgi?id=94158). Zapomnij o Chrome/Safari. Firefox/Opera nie implementuje nawet jednostek rzutni. Wygląda na to, że IE10 jest jedyną przeglądarką, która rozumie twój kod. ':)' –

Zrobiłem to działa w IE10:

#elem { 
    width: 100vw; 
    height: calc((9/16)*100vw); 
} 

@media (min-aspect-ratio:16/9) { 
    #elem { 
     height: 100vh; 
     width: calc((16/9)*100vh); 
    } 
}

żywo demo:http://jsfiddle.net/C2ZGR/show/ (otwarty w IE10 (wersja podglądu dostępnego dla Windows 7), a następnie ponownie rozmiar okna, tak że albo szerokość lub wysokość jest bardzo mała)

Użyłem elementu o współczynniku proporcji 16: 9, ale kod może działać dla dowolnego współczynnika proporcji - wystarczy wymienić 16/9 i 9/16 z wymaganym współczynnikiem kształtu.

Btw, IE10 to jedyna przeglądarka, w której działa to demo. Firefox/Opera nie implementują jeszcze jednostek rzutni, a przeglądarki WebKit mają obecnie błąd, w którym jednostki rzutni nie mogą być używane wewnątrz calc().

Źródło

2013-01-19 22:42:48

Bardzo ładne. Dziękuję Ci. –

Wygląda na to, że działa w Chrome. – BlueMonkMN

Jednostki rzutni, zachowując współczynnik kształtu?

Odpowiedz

Powiązane problemy