Setting-Element Breite auf Höhe Via CSS

Habe ich eine Reihe von Elementen und verlangen, dass Ihre minimale Breite, die gleich Ihrer Höhe, aber die Höhe ist nicht explizit festgelegt. Zurzeit bin ich in der Lage, dies zu erreichen, indem die css - min-width Immobilie über jQuery:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);

Ist es möglich, geben Sie dieses Verhalten direkt in die css?

Hier ein jsfiddle zu demonstrieren, was ich versuche zu erreichen: http://jsfiddle.net/p8PeW/

InformationsquelleAutor verdesmarald | 2011-05-27

  1. -3

    Ich glaube nicht, dass dies möglich ist, ohne JS, aber vielleicht kann jemand beweisen mich nicht falsch?

    Nicht die CSS ermöglichen die Verwendung dynamischer Variablen, so dass, wenn die Höhe nicht festgelegt, bis die Seite geladen wird, ich bin mir nicht sicher, wie das getan werden könnte.

    Siehe Antwort von @Josh unten. Es ist möglich,.

    InformationsquelleAutor Jeff

  2. 48

    Dies ist tatsächlich möglich, ohne JS!

    Der Schlüssel ist, stellen Sie die Verwendung eines <img>, das ist ein ersetzt element, und daher, wenn Sie nur die Höhe, die Breite wird automatisch so gesetzt, um die Erhaltung der intrinsischen Seitenverhältnis des Bildes.

    Daher können Sie Folgendes tun:

    <style>
  .container {
    position: relative;
    display: inline-block; /* shrink wrap */
    height: 50%; /* arbitrary input height; adjust this */
  }
  .container > img {
    height: 100%; /* make the img's width 100% of the height of .container */
  }
  .contents {
    /* match size of .container, without influencing it */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

<div class="container">
  <!-- transparent image with 1:1 intrinsic aspect ratio -->
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  <div class="contents">
    Put contents here.
  </div>
</div>

    Wenn Sie wollte .contents haben ein Seitenverhältnis von 4:3, dann würden Sie stattdessen legen Sie die height des img zu 133%, so dass die Breite des img und damit der .contents wären 133% der Höhe der .container.

    Live-demo 1:4-Seitenverhältnis: http://jsbin.com/afecej/1/edit (mit zusätzlichen Kommentaren im code)

    Falls Sie sich Wundern, die img Daten-URI ist für eine 1x1 px gif). Wenn das Bild nicht über ein 1:1 Seitenverhältnis, müsstest du die Höhe justieren Sie die Werte entsprechend gesetzt.

    dies ist eine fantastische Lösung.. das sollte die Antwort sein! Danke @John
    Kann jemand dies funktioniert z.B. über .container:first-child::before { ... }? Wäre wahrscheinlich sehr hilfreich, um eine Lösung nur mit css!
    Diese Methode kann ein bisschen einfacher zu verwenden, mit einem <canvas>, wie es ist standardmäßig transparent und Sie können seine Breite/Höhe willkürlich zu schaffen, ein Bild der gewünschten Seitenverhältnis, ohne jemals darauf zu zeichnen. Beachten Sie, dass Sie möglicherweise stellen padding: 0 und margin: 0 auf der Leinwand oder Bild, oder es werden möchten, nehmen mehr Raum ein als erwartet.
    Dies scheint nicht zu funktionieren, wenn das Behältnis nicht ein absoluter Wert, sondern ein Prozentsatz? Ändern der pastebin zu set 20% als die Höhe des Containers nicht funktioniert
    Prozentsätze funktionieren. In Ihrem Fall ist der container ein untergeordnetes Element des Körpers, die nicht über eine Höhe angegeben, so geben Sie dem container einen prozentualen Höhe dazu führt, dass null der Höhe. Versuchen Sie html, body { height: 100%; } wenn Sie wollen, geben Sie dem container eine Höhe, die ist ein Prozentsatz der Fensterhöhe.

    InformationsquelleAutor John Mellor

  3. 1

    Vom W3C Box-Modell auf Polsterung:

    Der Prozentsatz wird berechnet, mit Bezug auf die Breite der
    die erzeugte box ist mit block, sogar für 'padding-top' und
    'padding-bottom'. Wenn die Sie enthaltenden block die Breite hängt von diesem
    element, dann ist das resultierende layout ist nicht definiert in CSS 2.1.

    So können Sie es mit nur CSS. Sehen dieses Beispiel von in diesem blog-post auf ein anderes Thema ebenso interessant. Der trick, um die Schaffung ratio Boxen ist mit so etwas wie 

    element::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

    InformationsquelleAutor Henry Mazza

  4. 0

    Wenn Sie versuchen, Quadrate, müssen Sie die Rechnung für beide Fälle (W > H und W < H):

    $('label').each(function() {
    if ($(this).height() > $(this).width()) {
        $(this).css('min-width', $(this).height());
    } else {
        $(this).css('min-height', $(this).width());
    }
});
    NÖ, ich bin glücklich für das element breiter als hoch ist, eben nicht höher als es breit ist.

    InformationsquelleAutor Blender

Schreibe einen Kommentar