Responsive Bild behält Seitenverhältnis und ist immer in der Mitte

Ich möchte CSS verwenden, um ein Bild zu behalten sein Seitenverhältnis (16: 9) und zur gleichen Zeit reagieren.Responsive Bild behält Seitenverhältnis und ist immer in der Mitte

Dieses Bild wird immer in der Mitte des Bildschirms angezeigt. Überprüfen Sie das Schema, um Ihnen zu helfen.

Ich fand this Post und ich versuchte Chris Lösung und Isaacs Lösung. Aber ich kann das Bild nicht ins Zentrum bringen. Ich habe versucht, Bootstrap so zu verwenden.

<div class="col-md-4">.col-md-4</div> 
<div class="wrapper col-md-4"> 
    <div class="main"> 
    This is your div with the specified aspect ratio. 
    </div> 
</div> 
<div class="col-md-4">.col-md-4</div>

oder

<body> 
    <div class="col-md-4" id="wrap1">.col-md-4</div>   
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div> 
    <div class="col-md-4" id="wrap2">.col-md-4</div>   
</body>

aber alle divs erscheinen die eine unter dem anderen.

Irgendwelche Ideen, wie man das div in die Mitte bringt, indem man Bootstrap benutzt oder nicht?

Dank

Quelle

2016-03-21 slevin

ich in einem div lege meinen img immer und div Zentrum mit:

margin:0 auto;

für reaktions Bild und Breite definieren und die Höhe mache Auto ist. Hoffe es hilft.

Quelle

2016-03-21 23:16:36 Ryuk

Dadurch wird Ihr Element auf der Seite zentriert.

.element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

Ich glaube, Sie würden einen min-width oder max-width für Ihr Bild bei 100% eines Behälters definieren müssen, die im Seitenverhältnis, die Sie für den zweiten Teil Ihrer Frage mögen. Wenn Sie das Seitenverhältnis dynamisch einstellen müssen, gibt es immer JS. Qjuery hat Funktionen, die Sie verwenden können. Ich denke, das wird nicht schwer, wenn Sie es bereits in Ihrem Projekt verwenden.

EDIT: das Bild in der zweiten Kopf zum Zentrum I mit einer Struktur, wie würde vorschlagen:

-zweiten Header

--------- wickeln

- --------------- Bild

haben das Bild als 100% Größe der Verpackung. haben den Umbruch relativ zum zweiten Header mit einer Breite und Höhe von 100% relativ dazu. Ich hoffe, dies hilft :)

Quelle

2016-03-21 23:25:32 Judder

Responsive Bild behält Seitenverhältnis und ist immer in der Mitte

Antwort

Verwandte Themen