Frage CSS: Image max-width funktioniert nicht in Firefox und IE


img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    display: block;
    -ms-interpolation-mode: bicubic;
}

Das obige CSS stammt aus Twitter Bootstrap Das ermöglicht reaktionsschnelle Bilder. Das einzige Problem ist, dass dies in Firefox und IE keine Auswirkungen hat.

Im folgenden Fall:

<div class="row-fluid">
    <div id="logo" class="span4">
        <a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
    </div>
</div>

http://dev.netcoding.net/lowgsglass/ueber-uns/ - Hier ist eine Seite, die das Problem zeigt.

Verkleinere die Seite in Firefox oder IE auf unter 432px und du wirst sehen, dass die Bilder nicht mehr der maximalen Breite folgen (während sie über 764px reichen).

Wie kann ich das beheben - ohne Bildcontainer zu verwenden -, um responsive Bilder in Firefox und IE funktionieren zu lassen?


5
2018-06-05 17:52


Ursprung


Antworten:


Ich habe viel mit Firefox / IE und max-width gekämpft, speziell wenn auf Elemente des Displays: Inline-Block. Ich verwende die folgende CSS-Lösung, um meine Korrekturen hinzuzufügen.

// Styles for Firefox
@-moz-document url-prefix() {
    #logo img {
        width: 100%;
    }
}

// Styles for IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #logo img {
        width: 100%;
    }
}

13
2017-11-06 12:35



Anstatt von width:auto, Versuchen width:100%.

Beste,

Cynthia


3
2018-06-15 18:48



Firefox kann Bilder nicht mit skalieren max-width/height ob width/height ist nicht definiert. Also gibt es zwei Möglichkeiten.

1. Set Breite und Max-Breite: 

width: 100%;
max-width: 100%;

2. Verwenden max-width und max-height im vw und vh:

max-width: 90vw;

Was bedeutet, dass das Bild maximal 90% der sichtbaren Breite hat. Habe Spaß!


3
2017-11-02 09:41



Eigentlich ist das Problem nicht das img-Tag, sondern die span * -Container. Wenn Bootstrap Responsive zu einem bestimmten Punkt kommt, wird Floating deaktiviert und die Breite auf 100% gesetzt. Wenn dieser Container wieder auf 100% zurückgesetzt wird, führt das untergeordnete Element (Ihr img-Tag) genau das aus, was Sie ihm gesagt haben, und erweitert es auf die maximale Breite von 100%.

Schau dir das von responsive.css an ... über der Deklaration im Stylesheet siehst du folgendes:

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    margin-left: 0;
    width: 100%;
}

Das ist der Grund dafür, dass der img "resize" ... sein Container schrumpft nicht mehr über einen bestimmten Punkt hinaus, aufgrund der Art und Weise, in der Bootstrap's responsive Styles eingerichtet sind.

Um dies zu verhindern, können Sie entweder das Bootstrap-Stylesheet modifizieren (in diesem Fall müssen Sie die Änderung jederzeit wiederholen, wenn Sie Ihre Bootstrap-Dateien aktualisieren möchten) oder Sie können in Ihrem eigenen Stylesheet etwa Folgendes tun:

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: inline-block;
    float: left;
}

Das wird das Floating zurück bringen, aber die Breite bleibt als Problem übrig, da der Standard-Bootstrap-Stil bei dieser Bildschirmbreite versucht, die Breite auf 100% zu setzen. Du könntest es versuchen width:auto und dann werden hoffentlich die Breiten für jeden spezifischen Span-Schritt (.span1, .span2, usw.) übernommen, aber du musst es wirklich testen, um zu sehen, was am besten für deine Situation funktioniert.


0
2018-06-05 20:10



Ein ähnliches Problem gab es nach der Implementierung einer großen Menge von Website-Design mit Bootstrap-Framework und nur Chrome für Debug ... Biiig Fehler © :) Es schien, dass coole Bootstrap-Stile für Bilder in IE und Mozilla überhaupt nicht funktioniert. Alle Bilder wurden nicht verkleinert und hatten ursprüngliche Breite, manchmal viel breiter als ich erwartet hatte ...

Ich hatte viele ähnliche Orte mit zwei Spalten von divs - span6 für die linke Spalte und span6 für die rechte Spalte (das sind Stile für flüssiges Bootstrap-Gitter). Manchmal wurden in diesen Spalten Bilder zwischen Textzeilen platziert, und wie Sie sehen, veränderten sich die Bilder in IE \ Mozilla nicht gut, und all das coole Design wurde überhaupt nicht gut :(

Nach googeln und versuchen, einige Ratschläge von Github Ich habe beschlossen, jQuery zu verwenden :) Ich fügte Klasse zu Spalte Container (imageContainer für flüssig span12 Zeile), und hinzugefügt Klassen 50perc für Bilder, die ich richtig Größe ändern musste (Größe jedes Bildes sollte sein 50% der Containergröße). Und hier ist der Code:

$(function(){
    var cont = $('.imageContainer');
    $('.50perc').each(function(i, el){
    $(el).width(cont.width() / 2);
});

p.s. Tatsächlich wird es sehr effektiv sein, diese Funktion im window.resize Event-Handler zu verwenden :)


0
2017-07-20 15:06



Ran in das gleiche Problem und habe immer noch nicht gefunden, ein Fix oder CSS nur Hack, außer für die Breite zwingen: 100% bei kleinen Browsergrößen, wenn die natürliche Breite des Bildes wird gewöhnlich größer sein als die Breite der Seite (hier habe ich angenommen, dass ich keine Bilder schmaler als 480px habe):

img
{
    width: auto;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{

    @-moz-document url-prefix() {
        /* Firefox doesn't respect max-width in certain situations */
        img
        {
            width: 100%;
        }
    }

Aber das wird immer noch dazu führen, dass Bilder, die natürlich kleinere Breiten haben, aufgeblasen werden, was schlecht ist. Zu diesem Zeitpunkt, wenn Javascript machbar oder bereits in Verwendung ist, würde ich dies hinzufügen, um jedes Bild zu treffen:

PSEUDO CODE:

$('img').css('max-width', this.actualFullSizeWidth + 'px');

... die die CSS-Regeln für die maximale Breite überschreiben und garantieren soll, dass das Bild nicht größer als seine tatsächliche Breite wird.


0
2018-02-14 23:22



Responsive Bilder für Firefox, IE, Chrome. Einfache Lösung, die in Firefox funktioniert

<div class="article"><img></div>

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}

0
2018-06-11 08:27