reaktions div für Banner erstellen

Question

wie reagieren div wie img-responsive Klasse in Bootstrap zu schaffen, sondern für ein div
, dass, wenn die Fenstergröße zu seiner Breite ändern, Höhe div Elementwechsel ..

wie diese Website im Zusammenhang Breite ...

bin ich sollte Javascript verwenden, um es zu tun oder ich kann es mit CSS tun oder Bootstrap Schieber „http://sabanet.ir“ , wenn Sie das Verhältnis der Höhe der Schieber halten Fenstergröße ändern?

<div class="responsive-banner"> 
     <!-- height/width === k --> 
    </div> 

Answer 1

Sie können dies durch @media Abfragen nur tun, wenn Sie nicht Erbe IE zu unterstützen suchen.

Definieren Sie die minimale und maximale Breite/Höhe des Ansichtsfensters und weisen Sie die Eigenschaft height auf der Grundlage von Unterbrechungspunkten zu.

Beispiel wäre:

@media only screen 
and (min-width: 320px) /* Define any min width that you deem appropriate */ 
and (max-width: 480px){ /* Define any max width that you deem appropriate */ 
.responsive-banner{ 
    height:200px /* Enter any value that you deem appropriate */ 
} 
} 

Sie mehrere der oben genannten Abfragen verwenden können unterschiedliche Bruchstellen oder Bereiche zu definieren.

Answer 2

für das Sie Bootstrap Grid System verwenden können.

zB:

<div class="row"> 
 
    <div class="col-md-3"> 
 
    This is text 1 
 
    </div> 
 
    <div class="col-md-3"> 
 
    This is text 2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    This is text 3 
 
    </div> 
 
    <div class="col-md-3"> 
 
    This is text 4 
 
    </div> 
 
    </div>

umfassen Bootstrap CSS (Sie können lokale Pfad herunterladen und geben oder Sie können CDN geben Weg, auch).

Jetzt was ich getan habe, ist.

Ich habe einen Bootstrap Zeile genommen, und teilte es in 4 gleiche Breite und Höhe Spalten. Was immer Sie in die jeweilige Spalte schreiben, wird von der Standardbreite der Spalte umgeben sein.

und in dieser spalte klasse div, wenn Sie Ihre benutzerdefinierte div, wird es je nach der Größe des Browser-Fensters reagieren.

Answer 3

nach der Suche und denke ich denke, dass einige Möglichkeiten, es

mit CSS-Einheiten zu tun:

wir CSS-Einheiten für relativ Größe
em verwenden können: Bezogen auf die Schriftgröße des Elements (2em bedeutet 2-fache der Größe der aktuellen Schrift)
ex: Bezogen auf die x-Höhe der aktuellen Schriftart (selten verwendet)
ch: Relativ zur Breite des „0“ (Null) 01.238. rem: Relativ zur Schriftgröße des Wurzelelementes
vw: Bezogen auf 1% der Breite des Bildfensters *

wir vw Einheit zum Einstellen der Höhe des div Elements wie unten

verwenden können

.responsive-banner { 
    height: 30vw; 
} 

mit jQuery:

zuerst setzen wir Lieblings Verhältnis zu einer variablen und, nachdem es um die Höhe des Elements zu ändern, indem seine Breite

var ratio = 700/1920; 
$(document).ready(function() { 
    $('.responsive-banner').height(ratio * $('.responsive-banner').width()); 
}); 

$(window).resize(function() { 
    $('.responsive-banner').height(ratio * $('.responsive-banner').width()); 
})