Force div haben gegenseitige Höhe und Breite mit inneren img

Question

Nach dem Mischen mit einer Vielzahl von Optionen, habe ich beschlossen, eine einfache 16_9.jpg (16x9) zu erstellen und dann in das div mit, um das div zu zwingen habe meine idealen Proportionen, aber es scheint, dass das div sich nicht um seine inneren Elemente kümmert, die in% skaliert sind. Ich kann die div Größe mit img Höhe = "100px" zum Beispiel beeinflussen, aber es funktioniert nicht mehr, wenn Prozent verwendet werden. Und es scheint, dass es mein letzter Ausweg ist, da ich ein Layout mit fester Höhe machen muss, was zu einer unbekannten genauen Breite führt - ich muss mich nur auf die Proportionen verlassen.

Answer 1

Die Verwendung einer prozentualen Höhe für ein Element in einem div, das keine feste Höhe hat, schlägt fehl, weil die prozentuale Höhe von der Höhe des Containers abhängt. Wenn Ihr div beispielsweise 200px groß ist, beträgt die Höhe eines Elements, das auf 100% gesetzt ist, 200px. Wenn das div jedoch keine Höhe hat, hat der Browser keine Höhe, um die prozentuale Höhe des inneren Elements zu bestimmen. Divs und andere Elemente auf Blockebene haben standardmäßig eine dynamische Höhe und Breite, die Höhe wird durch die Höhe der Elemente bestimmt, die im div enthalten sind, und die Breite wird durch die Breite des Elements bestimmt, das das div enthält.

Eine Möglichkeit, die Breite eines div auf seinem Inhalt zu setzen, ist, wenn Sie das div schweben lassen, in diesem Fall wird das div nicht länger seine Breite vom Container abgrenzen, sondern stattdessen von seinem Basis Kinder. Dies ist jedoch möglicherweise nicht die beste Lösung für Sie. Es ist schwer zu sagen ohne mehr Informationen darüber, was Sie wirklich erreichen wollen.