Wie kann ich Höhe von div mit einem Hintergrundbild basierend auf seiner Breite machen?

Question

Ich habe ein div der Klasse content:

.content { 
    position: relative; 
    height: auto; 
    overflow:auto; 
    padding: 0; 
    width: 100%; 
    margin: 0 auto; 
    background: URL("img/main.png") center no-repeat; 
    background-size: contain; 
    display: inline-block; 
} 

Ich möchte, dass im Inneren zusammen mit dem Bild div automatisch auf seine Behältergröße (Körper) basiert, um die Größe so habe ich Breite 100% definiert, und ich möchte Höhe anpassen und behalte das Seitenverhältnis.

Problem ist, dass, wenn ich keine Höhe in Pixel einstellen, das Bild nicht erscheint. Gibt es einen Weg dazu?

Im Grunde, was will ich erreichen ist die automatische Größenanpassung, wie auf dieser Seite: http://ketrawars.com/

Answer 1

, wenn Sie die Höhe auf 100% gesetzt sein, werden Sie auf jeden Fall erreichen, was Sie wollen. Überprüfen Sie den folgenden Stil.

.content { 
    position: relative; 
    height: 100%; 
    overflow:auto; 
    padding: 0; 
    width: 100%; 
    margin: 0 auto; 
    background: url("images/image.jpg") center no-repeat; 
    background-size: contain; 
    display: inline-block; 
} 

Answer 2

Sie könnten versuchen, min-height: 100% hinzuzufügen?

Answer 3

Sie können auch einfache jQuery-Code zu tun, verwenden, dass

var width=$(".content").width(); 
$(".content").height(width);