Die HTML (Danke 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>
Die CSS (Still von Rorys Basis gestartet)
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%;
}
Die Erklärung:
I Schriftgröße und ems bin mit auf " skalieren "die Dimensionen der Kindelemente.
Ems sind Maßeinheiten, die sich auf die Schriftgröße des aktuellen Kontexts beziehen.
Wenn ich also sagen, ich habe eine Schriftgröße von 13px und eine Grenze von 1 (die gewünschte Grenzbreite in Pixel) divded durch 13 (die Schriftgröße auch des aktuellen Kontexts in Pixel) = 0.07692307692307693em der Browser sollte eine 1px Rand
Um eine 15px Padding zu emulieren ich benutze die gleiche Formel, (gewünschte Pixel)/(aktuelle Kontext der Schriftgröße in Pixel) = gewünschte ems. 15/13 = 1.1538461538461537em
die Skalierung des Bildes zu zähmen ich einen alten Liebling von mir verwenden: das natürliche Verhältnis Skala zu bewahren, lassen Sie mich erklären:
Bilder haben eine natürliche Höhe und Breite und ein Verhältnis zwischen ihnen. Die meisten Browser behalten dieses Verhältnis bei, wenn sowohl die Breite als auch die Höhe auf auto eingestellt sind. Sie können dann die gewünschte Breite mit minimaler Breite und maximaler Breite steuern. In diesem Fall wird sie immer auf die volle Breite des übergeordneten Elements skaliert, selbst wenn sie über ihre natürliche Breite hinaus skaliert.
(Sie können auch max-Breite und max-Höhe 100%, um das Bild zu verhindern Zerschlagung der Grenzen des übergeordneten Elements verwenden, aber nie über ihre natürlichen Dimensionen Skalierung) Jetzt kann die Steuerung
Sie skalieren, indem Sie die Schriftgröße auf # content-to-scale anpassen. 1.1em entspricht ungefähr der Skala (1.1)
Dies hat einige Nachteile: geschachtelte Schriftgrößen in ems werden rekursiv angewendet.Bedeutung, wenn Sie:
<style type="text/css">
div{
font-size: 16px;
}
span{
font-size: 0.5em;
}
</style>
<div>
<span>
<span>
Text
</span>
</span>
</div>
Sie werden mit „Text“ am Ende bei 4px statt der 8px Rendering man erwarten könnte.
Hier ist [ein JS Bin für alle zum Experimentieren] (http://jsbin.com/izicog/3/edit), mit [Stylus] (http://learnboost.github.com/stylus/) als die Stylingsprache. Es gibt auch eine [einfache CSS-Version] (http://jsbin.com/ohosaw/1/edit). –
Einige Referenzen zu CSS-Transformationen: [eine Demo zu Rotate, Skew und Scale] (http://www.zenelements.com/blog/css3-transform/). Mozilla Developer Network auf dem ['transform'] (https://developer.mozilla.org/en-US/docs/CSS/transform) und [' transform-origin'] (https://developer.mozilla.org/ de-DE/docs/CSS/transform-origin) Eigenschaften. –
Lassen Sie mich das klarstellen: Sie möchten das untergeordnete Element transformieren und dabei möchten Sie, dass CSS die Höhe und Breite der Eltern ändert. Recht? Wenn dies der Fall ist, dann gibt es keine hierarchische Vererbung in child-> to> parent, d.h. rückwärts/aufwärts in CSS. –