Transform:scale

0

Mamy sobie kod:

<div style="margin-top:100px;width:auto;height:auto;border: solid 1px black; padding:4px;">
<div style="width:auto;height:auto;border: solid 1px black; padding:4px;transform: scale(1,5); ">
A oto przykładowy tekst.
</div>
</div>

A wynik jest na rysunku! Jak widzimy, div-dziecko wychodzi poza rozmiary div-rodzica po działaniu funkcji transform:scale(1,5).

Jak zrobić, aby div-rodzic dopasowywał się do rozmiaru div-dziecka nawet podziałaniu tej wspomnianej funkcji?

1

Dziecko wychodzi poza rodzica z powodu zastosowanego modelu pudełkowego[1] - dorzuć do rodzica i dziecka box-sizing:border-box.

[1] domyślnie width:20px; padding:4px; spowoduje wizualnie zwiększenie szerokości do 28px (czyli domyślnie tak naprawdę actualWidth = width + paddingLeft + paddingRight).

0

Jak dodałem do rodzica i dziecka box-sizing:border-box, co po zastosowaniu tego w:

<div style="margin-top:100px;width:auto;height:auto;border: solid 1px black; padding:4px;box-sizing:border-box">
<div style="width:auto;height:auto;border: solid 1px black; padding:4px;transform: scale(1,5);box-sizing:border-box">
A oto przykładowy tekst.
</div>
</div>

To to nie działa!

1 użytkowników online, w tym zalogowanych: 0, gości: 1