Gibt es eine Möglichkeit, die Breite zu lesen und eine Höhe mit demselben Wert einzustellen? Ich kenne den Trick mit viewhartheight [vh] und [vm], aber es wird hier nicht gut funktionieren.Einen quadratischen div mit Vererbung oder etw machen? (no js)
0
A
Antwort
2
Sie können es tun, indem Sie die Tatsache verwenden, dass in padding-bottom: 100%
der Prozentsatz Prozent der Breite ist, und nicht die Höhe. Wenn Sie also ein Pseudo-Element mit padding-bottom: 100%
setzen, ändert sich die Höhe entsprechend der Breite. Der Inhalt kann sich in einer absoluten Positionsebene befinden.
.container {
position: relative;
width: 100px;
}
.container:hover {
width: 150px;
transition: width 2s;
}
.container::before {
display: block;
padding-bottom: 100%;
content: '';
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
}
<div class="container">
<div class="content">
</div>
</div>
+0
nett :) etwas, das ich gesucht habe – Dawid
Verwandte Themen
- 1. Volle Ansichtsfensterhöhenskalierung div nur css no js ... Möglich?
- 2. cakephp machen div einen Link
- 3. Component Vererbung mit vue js
- 4. Eine div Folie mit js
- 5. Machen Sie einen Schnappschuss von einem div
- 6. Verwenden von .no-js-Klasse für die Erkennung von js
- 7. Ext Js: machen Knopf einen Link
- 8. Verwenden von Collapse/Akkordeon um einen umschaltbaren div zu machen
- 9. Diese div responsive machen
- 10. Einen SVG-Text ziehbar machen mit d3.js
- 11. Chained Select mit NO jQuery oder Ajax
- 12. ein div „überlappt“ div-Container machen
- 13. Abrufen von WPF-ETW-Ereignissen mit XPerf.exe
- 14. machen d3.js kompatibel mit IE8/IE9
- 15. Vererbung oder Bedingung?
- 16. Vererbung oder Verschachtelung mit Docker komponieren
- 17. JS Höhe der Div
- 18. ionic-content: padding oder no padding?
- 19. einstellen div Breite mit JS zum Inhalt
- 20. Zusammensetzung oder Vererbung
- 21. Vererbung oder Kennung
- 22. Entwurfsmuster: Vererbung oder Zusammensetzung
- 23. Machen div mit Position absolut scrollbar
- 24. Virtuelle Vererbung mit Constructor Vererbung
- 25. Ein Problem über Algorithmus von String, dp, Graph oder etw.
- 26. Wenn Anweisungen: x ist gleich etw oder sth
- 27. DIV-Inhalt ansprechend machen
- 28. Raphael JS und Screenshot auf Div
- 29. Wie kann ich einen scrollenden Div Hintergrund transparent machen?
- 30. Hilfe mit div - machen die verbleibende Breite
Nicht ohne Skript (ich habe ein wenig schweben Animation zeigen, dass das Ändern Breite ändert sich auch die Höhe hinzugefügt). Was willst du erreichen? – LGSon
wollte nur wissen, ob es eine Möglichkeit gibt, es mit der Vererbung oder durch die Spiegelung Paddings einer Art zu tun – Dawid
@Ori Drori gepostet eine gute Lösung für Sie. – LGSon