W poprzednim wpisie związanym z aspect ratio zajmowaliśmy się ustalaniem proporcji w zależności od szerokości elementu. Czyli wysokość była zależna od tego wymiaru. Wspomniałem również, że ostatnie dwie metody mogą służyć do osiągnięcia dzisiejszego, tytułowego celu. I właśnie to dziś niewolnikiem wysokości będzie szerokość. Ale wspominałem również o przedziwnych konsekwencjach tego niewolnictwa.
Uwolnijmy kod.
<div><svg viewBox="0 0 1 2"></svg></div>
+
html,body{
height:100%;
}
body{
margin:0;
overflow:hidden;
}
div{
height:25%; /* tym razem stała jest wysokość */
display:inline-block;
background:#f00;
border:1px solid #000;
box-sizing:border-box;
}
div svg{
display:block;
height:100%; /* svg ma rozepchnąć się na pełną wysokość */
background:#ff0;
}
Dlaczego DIV ma nadany styl display:inline-block? Gdyby był block, to miałby pełną dostępna szerokość (w tym przypadku 100% szerokości ekranu), czyli nie dopasowywałby się owijając wokół SVG, który zapewnia utrzymanie aspect ratio.
Sprawdźmy więc jak działa kod na odwrócone aspect-ratio (tak je pozwoliłem sobie nazwać).
Dostrzeżesz żółty prostokąt i czarną ramkę. Ramka pochodzi od DIV, a żółty prostokąt to SVG. Nie nadawaliśmy szerokości dla DIV, ale tą ustawił element SVG, a DIV owinął się wokół niego. Zobacz jednak co się dzieje kiedy zaczynasz zmieniać okno przeglądarki. Zmniejszając okno zmienia się wysokość DIV, żółty prostokąt czyli nasz SVG też zmienia wysokość i szerokość (bo otrzymuje proporcje), ale szerokość elementu DIV pozostała taka jak przy załadowaniu strony. Przy zwiększaniu okno SVG wychodzi poza element DIV! Nie ma znaczenia czy ratio będzie trzymał element SVG czy IMG.
Po lewej jest efekt kiedy zwiększamy okno przeglądarki (SVG rośnie), a po prawej kiedy zmniejszamy.
Dlaczego tak się dzieje, nie mam pojęcia. Może Ty, Czytelniku, znasz przyczynę tego problemu? Jeśli tak, odezwij się koniecznie!
Man! Hack kick your ass!
Rozwiązanie tego problemu znalazłem kilka lat temu i niestety nie w czeluściach internetu. Wpadłem na pomysł, że być może element wymaga odmalowania (repaint), choć to dziwne, bo przecież jego wysokość się zmienia. Jakby nie było, postanowiłem dodać jakąś animację do elementu, ale taką, aby nie powodowała brzydkich efektów wizualnych. Czyli była niezauważalna.
Taki był wtedy hack w CSS:
div {
/* tu właściwości z poprzedniego przykładu */
animation: ibfix 100s infinite;
}
@keyframes ibfix {
0% {
max-width: 99.99%;
}
100% {
max-width: 100%;
}
}
Trochę czasu jednak minęło i jak się okazuje powyższy fix nie działa w przeglądarce Edge. Czyli wcale nie taki kicking ass...
Po wielu próbach z dziś, okazuje się, że wystarczy animować właściwość font-size:
div {
/* tu właściwości z poprzedniego przykładu */
animation: ibfix 1s infinite; /* musimy zmniejszyć czas trwania do ok. 1s */
}
@keyframes ibfix {
0% {
font-size: 0;
}
100% {
font-size: 1;
}
}
Tym razem odwrócone aspect-ratio działa!
Mam nadzieję, że Ty jednak nie odwrócisz się od tego bloga i spotkamy się przy nastepnym wpisie.
Przydatne linki:
Kto ma rację, czyli aspect ratio dla elementów HTML