Bilder auf Mobil gestaucht

    Hallo ich hab mal wieder ein Problem für das mir grad der Durchblick fehlt... zwar binde ich 3 Bilder auf einer Seite vor dem Footer einm soweit so gut aufn Desktop... nur auf mobil wird das hässlich gestaucht... sieht dann so aus :


    https://www.bilder-upload.eu/bild-ececc3-1575454092.png.html


    das ist der zugehörige Code dafür..


    Code
    <div class="col-lg-4 col-sm-12">
                    <img src="img/*****_img/******/axes.jpg "style="height:622px;width:830px;display:inline;padding-bottom: 20px;padding-top: 60px;" class="img-fluid">
                </div>

    und das hier dann in CSS


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

    Was mache ich falsch ? :O

    Zitat von Dropthemike

    Was mache ich falsch ? :O

    So ziemlich alles!

    Du hast einen Inline-Style, der auf jeden Fall in Sachen Formatierung dominant ist und deine Formatierungen im CSS-Stylesheet überschreibt. Es sei denn, du nutzt im im Stylesheet !important.

    In deinem Fall sind deine Vorgaben im Inline-Style - height: 622px; damit wird die Anweisung im Stylesheet height: auto; überschrieben das Bild bleibt 622px hoch - siehst du ja selbst auf deiner Seite.

    Lösche mal deinen kompletten Inline-Style und schreibe alle Formatierungen für die Klasse .img-fluid in dein Stylesheet - und die Angaben zur 'height' kannst du komplett weglassen - oder auf 'auto' belassen. Der Browser berechnet die Höhe von selbst, wenn er die 'width' kennt... width: 830px; max-width: 100%;

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden