bootstrap-3 - img-responsive funktioniert nicht

8

Ich habe eine kleine Seite zum Spaß gebaut, um mich mit Bootstrap vertraut zu machen.

Das Problem, das ich habe, ist, dass das Logo-Bild nicht reagiert, egal was ich versuche.

Der Code scheint ziemlich einfach zu sein. Ich bin mir sicher, dass ich nur ein kleines Detail vermisse:

%Vor%

(Hier ist eine Geige, die das Problem reproduziert) - Ссылка

    
stefgosselin 30.04.2015, 01:12
quelle

2 Antworten

9

Entfernen Sie zuerst das Attribut max-width: 184px aus dem Bild-Tag

%Vor%

Obwohl es besser ist, die Verwendung von Inline-Styling zu vermeiden:

%Vor% %Vor%

Wenn die Möglichkeit besteht, dass eines der Elemente des Vorfahrelements stört, können Sie es wie folgt zurücksetzen:

%Vor%

Wenn Sie immer noch mit dem Problem konfrontiert sind, wäre der nächste Schritt die Verwendung von JavaScript

%Vor%

Dieser Code sollte nach dem Element im Dokument eingefügt werden, andernfalls wird das angegebene Element nicht gefunden, da es noch nicht existiert.

Nachdem Sie nun das Beispiel zu Ihrer Frage hinzugefügt haben, können Sie das Bild durch Ersetzen des folgenden CSS in seine natürliche Größe bringen:

%Vor%

Mit diesem CSS:

%Vor%

( Demo )

Ich glaube, dass Ihre Verwendung von display: table Ihr Design beeinträchtigt. Im Folgenden sind zwei Methoden, um das gleiche Layout ohne Hacks zu erreichen.

CSS3-Methode

Alle relevanten modernen Browser unterstützen diese Methode. Wenn Sie also nicht auf Rückwärtskompatibilität mit alten Browsern achten, können Sie diese Methode verwenden.

( Demo )

%Vor% %Vor%

Tabellenmethode

Aus Gründen der Abwärtskompatibilität können Sie diese Methode verwenden.

( Demo )

%Vor% %Vor%     
Tiny Giant 30.04.2015 01:22
quelle
0

Versuchen Sie, max-width auf width: 100% zu ändern, um 100% der Containerbreite zu übernehmen, aber wenn sich die Containerbreite ändert, ändert sich auch die Größe der Bilder, wobei die Deckung immer 100% beträgt.
Das sollte funktionieren, wenn es mich nicht wissen lässt und ich werde es ein bisschen aushacken. Ich bin gerade auf meinem Telefon, also möchte ich es wirklich nirgends mit einer Bildschirmtastatur sandboxieren. Wenn das nicht funktioniert, werde ich es morgen Nachmittag auf meinem PC aushacken: D!

Ps. Gibt es einen Grund, warum Sie die Klasse .header-logo in einem Div deklarieren und dann im nächsten Div dieselbe Klasse wieder geben? Ich verstehe, wenn es eine andere Div-Block war, aber das ist im Wesentlichen ein Header-Logo in einem Header-Logo

    
Kevin Leegsma 30.04.2015 04:24
quelle

Tags und Links