Pflegen div Seitenverhältnis nach Höhe

Ich muss die Breite eines Elements als Prozentsatz seiner Höhe pflegen. Wenn sich die Höhe ändert, wird die Breite aktualisiert.Pflegen div Seitenverhältnis nach Höhe

Das Gegenteil ist möglich, indem Sie für padding-top einen% -Wert verwenden, aber prozentual für Padding-left ein Prozentsatz der Breite eines Objekts ist, nicht seine Höhe.

So mit Markup wie folgt aus:

<div class="box"> 
    <div class="inner"></div> 
</div>

Ich möchte etwas wie folgt verwenden:

.box { 
    position: absolute; 
    margin-top: 50%; 
    bottom: 0; 
} 
.inner { 
    padding-left: 200%; 
}

der Loge des Seitenverhältnis Um sicherzustellen, wird beibehalten entsprechend ist es Höhe. Die Höhe ist fließend wegen der% Marge - wenn sich die Höhe des Fensters ändert, wird auch die Höhe der Box.

Ich weiß, wie man dies mit JavaScript erreichen kann, frage mich nur, ob es eine saubere CSS-Lösung gibt?

Quelle

2014-10-18 Fijjit

sehen, ob das hilft: http://www.mademyday.de/css-height-equals-width-with-pure-css.html –

Und eine 'so' Antwort, die kann nützlich sein: [Höhe-gleich-zu-dynamisch-Breite-css-Fluid-Layout] (https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout/6615994 # 6615994). auch: [css-only-proportionale-resizing-of-elements] (http://wellcaffeinated.net/articles/2012/12/10/ly-simple-css-only-proportional-resizing-of-elements/) –

mögliches Duplikat von [Dimensionierungsbreite eines Elements als Prozentsatz seiner Höhe oder umgekehrt in einem Fluiddesign?] (http://stackoverflow.com/questions/17569322/sizing-width-of-an-element-as-a -percentage-of-this-height-oder-umgekehrt-in-flui) –

Sie können ein Bild mit den gewünschten Proportionen als Hilfe für die proportionale Skalierung verwenden (Bilder können proportional skaliert werden, indem eine Dimension auf einen Wert und eine andere auf auto gesetzt wird). Das Bild muss nicht sichtbar sein, muss aber Platz einnehmen.

.box { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 50%; 
 
} 
 
.size-helper { 
 
    display: block; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(255, 255, 153, .8); 
 
}

<div class="box"> 
 
    <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100"> 
 
    <div class="inner"> 
 
    1. box has fluid height<br> 
 
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br> 
 
    2.1 it thus maintains width = 200% of height<br> 
 
    2.2 it defines the dimensions of the box<br> 
 
    3. inner expands as much as box 
 
    </div> 
 
</div>

Im obigen Beispiel, Box, innere und Helfer sind alle gleich groß.

Quelle

2014-10-18 11:04:32

+1 schön, ich hätte daran gedacht! –

+1 wirklich nett, aber ein Bild laden ....: \ –

Sie rockten! Was für eine Gedankenbeuge Idee! –

Sie können vh-Einheiten sowohl für die Höhe als auch für die Breite Ihres Elements verwenden, sodass sich beide entsprechend der Höhe des Ansichtsfensters ändern.

vh 1/100stel der Höhe des Ansichtsfenster. (MDN)

DEMO

.box { 
 
    position: absolute; 
 
    height:50vh; 
 
    width:100vh; 
 
    bottom: 0; 
 
    background:teal; 
 
}

<div class="box"></div>

Quelle

2014-10-18 10:16:09

Schön! Das ist Schlau! Es ist nicht genau die Frage, aber könnte eine Lösung sein. – tzi

Ich bin mir nicht sicher, ob das die Frage beantwortet. Das OP erklärte klar: "Bewahre die Breite eines Elements als Prozentsatz seiner Höhe", nicht die Höhe des Ansichtsfensters. –

@HashemQolami Ja, das funktioniert nur, wenn die Höhe des Elements entsprechend der Ansichtsfensterhöhe eingestellt ist. Aber mir ist keine andere CSS-Lösung bekannt. –

Die CSS-Trick, den Sie geschrieben hat, funktioniert recht gut Verhältnis width/height auf einem Element zu halten. Es basiert auf der padding Eigenschaft, die, wenn ihr Wert in Prozent ist proportional zur übergeordneten Breite, auch für padding-top und padding-bottom.

Es gibt keine CSS-Eigenschaft, die eine horizontale Größe proportional zur übergeordneten Höhe festlegen könnte. Also ich denke, es gibt keine saubere CSS-Lösung.

Quelle

2014-10-18 10:18:08 tzi

Ich kann keine reine CSS-Lösung finden. Hier ist eine Lösung mit JavaScript-Bibliothek CSS Element Queries.

var aspectRatio = 16/9; 
var element = document.querySelector('.center'); 
function update() { 
    element.style.width = (element.clientHeight * aspectRatio) + 'px'; 
} 

new ResizeSensor(element, update); 
update();

CodePen demo!

Quelle

2017-04-13 03:36:14

Antwort

Verwandte Themen