Behalten Sie das Seitenverhältnis von einem div mit der CSS

Ich habe einen Weg gefunden, dies zu tun mit CSS, aber Sie müssen aufpassen, denn es kann sich ändern, je nach Strömung Ihre eigene web-site. Ich habe es getan, um das einbetten von Videos mit einem Konstanten Seitenverhältnis innerhalb einer Flüssigkeit Breite Teil meiner web-site.

Sagen, Sie haben ein eingebettetes video wie dieses:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Könnte man dann platzieren Sie diese alle in einem div mit einem "video" - Klasse. Dieses video Klasse wird wohl sein, das flüssige element in Ihre website so, dass, von selbst, es hat keine direkte Höhe Beschränkungen, aber wenn Sie die Größe des Browsers ändert es in der Breite nach, um den Fluss der web-site. Das wäre das element, das Sie werden wahrscheinlich versuchen, Ihre embedded-video-in, während die Aufrechterhaltung einer bestimmten Seitenverhältnis des Videos.

Um dies zu tun, legte ich ein Bild, bevor Sie das eingebettete Objekt innerhalb des "video" - Klasse div.

!!! Der wichtige Teil ist, dass das Bild im richtigen Seitenverhältnis, die Sie pflegen wollen. Auch, stellen Sie sicher, dass die Größe des Bildes ist MINDESTENS so groß wie die kleinsten erwarten Sie das video (oder was auch immer Sie für den Unterhalt der A. R.), um basierend auf Ihr layout. Dadurch vermeiden Sie mögliche Probleme in der Auflösung des Bildes, wenn es im Verhältnis verkleinert. Zum Beispiel, wenn Sie wollten, um ein Seitenverhältnis von 3:2 nicht nur mit einem 3px durch 2px Bild. Es kann funktionieren, unter gewissen Umständen, aber ich habe es noch nicht getestet, und es wäre wahrscheinlich eine gute Idee, um zu vermeiden.

Sollte man wohl schon haben Sie eine minimale Breite wie diese definiert für die fluid-Elemente Ihrer Website. Wenn nicht, ist es eine gute Idee dies zu tun, um zu vermeiden, hacken-Elemente aus oder überlagern, wenn das Browserfenster zu klein wird. Es ist besser, eine scroll-Leiste an einem gewissen Punkt. Die kleinsten in der Breite eine Webseite bekommen, ist irgendwo um ~600px (einschließlich einer festen Spaltenbreite), weil die Auflösungen kommen nicht kleiner, es sei denn, Sie sind den Umgang mit Handy-freundliche Websites. !!!

Benutze ich ein komplett transparentes png aber ich glaube nicht wirklich, dass es am Ende ausmachen, wenn Sie es richtig machen. Wie diese:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Nun sollten Sie in der Lage, hinzufügen von CSS die der folgenden ähnelt:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Stellen Sie sicher, Sie entfernen auch eine explizite Höhe und Breite Erklärung innerhalb des object-und embed-tags, die kommen in der Regel mit copy/Paste embed code.

Wie es funktioniert, hängt von der position, die Eigenschaften der video-Klasse element und das Element, das Sie möchten, halten die einen bestimmten Aspekt-Verhältnis. Es nutzt dabei die Möglichkeit ein Bild weiterhin das richtige Seitenverhältnis bei der Größenänderung in einem element. Es erzählt, was es sonst noch im video-element class im vollen Umfang zu nutzen-Vorteil von der Immobilien-zur Verfügung gestellt von der " dynamic image von zwingt seine Breite/Höhe bis zu 100% der video-Klasse element wird angepasst, indem das Bild.

Ziemlich cool, eh?

Möglicherweise haben Sie zu spielen, um mit ihm ein bisschen, um es mit Ihrem eigenen design, aber das funktioniert eigentlich überraschend gut für mich. Das Allgemeine Konzept ist es.

InformationsquelleAutor forgo

Elliot inspirierte mich zu dieser Lösung - danke:

aspectratio.png ist eine komplett transparente PNG-Datei mit der Größe Ihres bevorzugten Aspekt-ratio, in meinem Fall 30x10 Pixel.

HTML -

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Bitte beachten Sie: background-size ist ein css3-feature, das möglicherweise nicht mit Ihrem Ziel-Browsern. Sie können die Interoperabilität (f.e. auf caniuse.com).

InformationsquelleAutor florianb

Gründen auf Ihre Lösungen, die ich gemacht habe einige trick:

Wenn Sie es verwenden, Ihre HTML wird nur

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Verwenden es auf diese Weise machen:
CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

und js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

Diese Sie stellen nur attr data-keep-ratio auf Höhe/Breite und das ist es.

InformationsquelleAutor pie6k

Als @web-tiki zeigen bereits einen Weg, um vh /vw ich brauche auch einen Mittelpunkt in den Bildschirm, hier ist ein code-snippet für 9:16 portrait.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY halten, dieses Zentrum in den Bildschirm. calc(100vw * 16 /9) wird erwartet, dass die Höhe für 9/16.(100vw * 16 /9 - 100vh) ist der überlauf Höhe, also, ziehen Sie sich overflow height/2 halten Sie auf Bildschirm zentrieren.

Für Landschaft und halten 16:9, Sie Einsatz zeigen

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Verhältnis 9/16 ist einfach zu ändern, keine Notwendigkeit, um vordefinierte 100:56.25 oder 100:75.Wenn Sie sicherstellen möchten, dass die Höhe der ersten, schalten Sie die Breite und Höhe, z.B. height:100vh;width: calc(100vh * 9 /16) für 9:16 portrait.

Wenn Sie möchten, angepasst für verschiedene Bildschirm-Größe, Sie können auch Interesse

• background-size cover/enthalten
  • Oben Stil ist ähnlich zu enthalten, hängt von Breite:Höhe-Verhältnis.
• Objekt-fit
  • cover/enthalten img/video-tag
• @media (orientation: portrait)/@media (orientation: landscape)
  • Media query für portrait/landscape zu ändern das Verhältnis.

InformationsquelleAutor wener

können sagen, Sie haben 2 divs die outher div ist ein container, und das innere können eine beliebige element, das Sie brauchen, zu halten Ihr Verhältnis (img-oder einem youtube-iframe oder was auch immer )

html sieht wie folgt aus :

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

können sagen, Sie brauchen, um das Verhältnis von "element"

ratio => 4 zu 1 oder 2 zu 1 ...

css sieht wie folgt aus

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

Auffüllung, angegeben in %, bezogen auf die Breite, nicht die Höhe.
..
also im Grunde genommen ist es egal, was Ihre Breite ist es, die Höhe wird immer so berechnet, dass . die halten das Verhältnis .

InformationsquelleAutor aeid

Wenn Sie wollen, um zu passen ein Platz im inneren des viewport entweder im portrait-oder landscape-Ansicht (so groß wie möglich, aber nichts kleben außen), Umschalten zwischen vw/vh auf die Ausrichtung portrait/landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

InformationsquelleAutor MoonLite

Sagen, dass Sie zu pflegen Width: 100px und Höhe: 50px (d.h., 2:1)
Genau dies tun die Mathematik:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); //i.e., 2:1
}

InformationsquelleAutor Syed

Wenn die gesamte container-Struktur war der Prozentsatz basiert, wäre dies das Standardverhalten ist, können Sie ein mehr konkretes Beispiel?

Unten ist ein Beispiel, was ich meine, wenn Sie Ihre gesamte übergeordnete Hierarchie war %, alle browser-Fenster Einstellung arbeiten würde, ohne zusätzliche js/css, ist das nicht eine Möglichkeit, mit Ihrem layout?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

InformationsquelleAutor Nick Craver