Na środku mojej strony mam element div z pewną zawartością (inne elementy div, obrazy, cokolwiek).Skaluj/powiększ element DOM i zajmowaną przestrzeń za pomocą skali transformacji CSS3()

<div> 
    before 
</div> 
<div id="content-to-scale"> 
    <div>something inside</div> 
    <div>another something</div> 
</div> 
<div> 
    after 
</div>

Chciałbym przeskalować ten element (content-to-scale) i wszystkie jego dzieci. Wydaje się, że jest to zadanie dla operacji skalowania transformacji CSS3. Problem polega jednak na tym, że jest to transformacja tylko w wizualizacji hierarchii tego elementu, nie zmienia ona ilości miejsca (lub pozycji) elementu na stronie. Innymi słowy, skalowanie tego elementu spowoduje jego nakładanie się z tekstem "przed" i "po".

Czy istnieje prosty/niezawodny sposób skalowania nie tylko reprezentacji wizualnej, ale także zajmowanej przestrzeni?

Dodatkowe punkty za czysty CSS bez JavaScriptu. Jeszcze więcej punktów za rozwiązanie, które ma właściwą rzecz: z innymi funkcjami transformacji, takimi jak obracanie i pochylanie. Nie musi to być transformacja CSS3, ale musi być obsługiwana we wszystkich najnowszych przeglądarkach obsługujących HTML5.

Źródło

2012-05-16 kanaka

Oto [pojemnik JS dla wszystkich do eksperymentowania] (http://jsbin.com/izicog/3/edit), z [Stylus] (http://learnboost.github.com/stylus/) jako język stylizacji. Istnieje również [zwykła wersja CSS] (http://jsbin.com/ohosaw/1/edit). –

Niektóre odniesienia dotyczące CSS przekształcają się: [prezentacja obracania, pochylania i skali] (http://www.zenelements.com/blog/css3-transform/). Mozilla Developer Network na ['transform'] (https://developer.mozilla.org/en-US/docs/CSS/transform) i [' transform-origin'] (https://developer.mozilla.org/ en-US/docs/CSS/transform-origin) właściwości. –

, więc pozwól, że zrozumiem to prosto: chcesz przekształcić element potomny i podczas tej czynności chcesz, aby CSS zmieniał wysokość i szerokość rodzica. Dobrze? Jeśli tak, to nie ma dziedziczenia potomnego-> do-> nadrzędnego, tj. Hierarchicznego dziedziczenia wstecz/w górę w CSS. –

HTML (Dzięki Rory)

<!DOCTYPE html> 
<html> 
<head> 
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" /> 
<meta charset=utf-8 /> 
    <title>Sandbox for SO question about scaling an element both visually and dimensionally</title> 
</head> 
<body> 

    <div id="wrapper"> 
    <div class="surrounding-content"> 
     before 
    </div> 

    <div id="content-to-scale"> 
     <div>something inside</div> 
     <div><img src="http://placekitten.com/g/150/100"></div> 
     <div>another something</div> 
    </div> 

    <div class="surrounding-content"> 
     after 
    </div> 
    </div> 

</body> 
</html>

CSS (Still rozpoczął od podstawy Rory)

body { 
    font-size: 13px; 
    background-color: #fff; 
} 
#wrapper { 
    width: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    border: 0.07692307692307693em solid #888; 
    padding: 1.1538461538461537em; 
} 
.surrounding-content { 
    border: 0.07692307692307693em solid #eee; 
} 
#content-to-scale { 
    border: 0.07692307692307693em solid #bbb; 
    width: 10em; 
} 
#content-to-scale { 
    font-size: 1.1em; 
} 
#content-to-scale img { 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    max-width: 100%; 
}

Wyjaśnienie:

używam rozmiaru czcionki i EMS " skala "wymiary elementów potomnych.

Ems są jednostkami wymiaru, które są względne w stosunku do rozmiaru czcionki bieżącego kontekstu.

Więc jeśli powiem, mam rozmiar czcionki na 13px i granicy 1 (pożądany border-szerokość w pikselach) divded przez 13 (font-size obecnym kontekście jest również w pikselach) = 0.07692307692307693em przeglądarkę powinien renderować granicę 1px

Aby emulować wypełnienie 15 pikseli używam tej samej formuły (pożądane piksele)/(rozmiar czcionki bieżącego kontekstu w pikselach) = pożądane ems. 15/13 = 1.1538461538461537em

oswoić skalowanie obrazu używam starego mój ulubiony: stosunek naturalne konserwujący skalę, pozwól mi wyjaśnić:

Obrazy mają naturalną wysokość i szerokość, a stosunek między nimi. Większość przeglądarek zachowa ten stosunek, jeśli szerokość i wysokość są ustawione na auto. Następnie można sterować żądaną szerokością za pomocą funkcji min-width i max-width, w tym przypadku zawsze skalując ją do pełnej szerokości elementu nadrzędnego, nawet jeśli skaluje się poza jego naturalną szerokość.

(Można również użyć max-width i max-height: 100%, aby zapobiec obraz z krach z granicami elementu nadrzędnego, ale nigdy skalowania poza ich naturalnych rozmiarach)

Teraz można kontrolować skalowanie poprzez ulepszenie rozmiaru czcionki w # treści do skali. 1.1em mniej więcej równa się skali (1.1)

Ma to pewne wady: zagnieżdżone rozmiary czcionek w ems są stosowane w trybie recusywnym.Znaczenie: jeśli masz:

<style type="text/css"> 
    div{ 
     font-size: 16px; 
    } 
    span{ 
     font-size: 0.5em; 
    } 
</style> 
<div> 
    <span> 
     <span> 
      Text 
     </span> 
    </span> 
</div>

W efekcie otrzymasz renderowanie tekstu o wartości 4 pikseli zamiast 8 pikseli, których możesz się spodziewać.

Źródło

2012-08-23 06:53:23

Początkowo myślałem, że możesz rozwiązać problem z zagnieżdżonymi 'em' za pomocą jednostki [' rem' ("root em")] (http://snook.ca/archives/html_and_css/font-size-with-rem) , ale teraz myślę, że działałoby to tylko wtedy, gdy skalujesz całą stronę - 'rem' zauważa tylko zmiany wielkości czcionki w głównym elemencie' html'. –

to, co powiedziałeś o stosunku em i obrazu może być całkiem poprawne, ale w jaki sposób odpowiada to na pytanie o transformację i utrzymywanie przekształconego elementu w środku zewnętrznego otoczenia? –

[JS Bin tego rozwiązania] (http://jsbin.com/ehejih/1/edit). [Wersja demonstrująca zagnieżdżony problem 'em'.] (Http://jsbin.com/idoxan/1/edit). –

Skaluj/powiększ element DOM i zajmowaną przestrzeń za pomocą skali transformacji CSS3()

Odpowiedz

Teraz można kontrolować skalowanie poprzez ulepszenie rozmiaru czcionki w # treści do skali. 1.1em mniej więcej równa się skali (1.1)

Powiązane problemy