Wie kann man ein Bild innerhalb der index.html responsive machen?

Thema wurde von marit, 31. März 2017 erstellt.

  1. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    Hallo,
    ich habe auf meiner index.html ein Banner mit animierten gifs, 472px breit. Ich möchte es nicht zu stark verkleinern und daher höchstens etwas verkleinert auf Bildschirmen ab 400 px Breite darstellen. Auf kleineren Smartphones soll es in der Vertikalansicht wegbleiben. Wie kann ich das im Bootstrap-Code ausdrücken?
    Liebe Grüße
    Marieluise
     
  2. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Wie hast du das Banner denn jetzt eingebunden? Da wäre Quellcode ganz gut.
     
  3. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    #3 marit, 31. März 2017
    Zuletzt von einem Moderator bearbeitet: 3. April 2017
    Ganz ohne jegliche List und Tücke, einfach so:

    HTML:
    <center><img alt="" border="0" src="/img/random.php?wulle.gif|kalbfred.gif|pinguin1.gif|pinguin3.gif|text3.gif|monster1.gif|pinguin4.gif|pinguin5.gif|stinker.gif|text1.gif" />
    <center><br />
    Die random.php ist ein kleines Progrämmchen, das mein Mann geschrieben hat. Es wechselt nach zufälligem Muster die Animation, die dem jeweiligen Kunden gezeigt wird.

    Ich hatte übrigens Bootstrap-Code im Editor einer Kategorienübersichtsseite stehen, der hat mir die ganze Seite zerschossen und musste rausgenommen werden. Darf man überhaupt keinen reinschreiben oder war der dann mit Sicherheit falsch?

    Nachtrag: Auf meinem 7-Zoll-Tablet wird das Banner ordentlich verkleinert, auf dem iphone 6 eines Testers kein bisschen. Und der Shop ist inzwischen online.
     
  4. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Versuch mal folgendes:

    HTML:
    <center><img class="img-responsive" alt="" border="0" src="/img/random.php?wulle.gif|kalbfred.gif|pinguin1.gif|pinguin3.gif|text3.gif|monster1.gif|pinguin4.gif|pinguin5.gif|stinker.gif|text1.gif" />
    <center><br />
    Damit sollte sich das Bild dann an die Bildschirmauflösung anpassen.

    Zu deinem Problem auf der Kategorieseite: Könnte durchaus sein, dass der HTML-Code falsch war. An der Stelle sollte auch die Eingabe von Bootstrap-formatiertem Code möglich sein. Um das genau sagen zu können, müsste ich den Code allerdings sehen.
     
  5. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    @Torben (Gambio)
    Danke, klappt!
    Den Code auf der Kategorieseite hab ich gelöscht, Kopie gibts ja davon nicht, selbst bei vollständigem Backup. Ich hatte ihn aber aus einer Anleitung hier im Forum kopiert und sinngemäß verändert:
    Leider läuft der Text der Kategorieseite
    www.ohrsicht.de/shop/Theatertexte
    auf einem großen PC-Bildschirm leider viel zu breit, aber das ist mir immer noch lieber als gar kein Text.
    Liebe Grüße
    Marieluise
     
  6. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    In dem Fall muss da noch ein

    HTML:
    <div class="row">
    </div>
    um den Rest herum, damit das da korrekt angezeigt werden kann.
     
  7. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    #7 marit, 3. April 2017
    Zuletzt bearbeitet: 3. April 2017
    @Torben (Gambio)
    Nun habe ich doch was gefunden. Auf meiner Seite www.ohrsicht.de/shop/Sparschweinpakete hab ich denselben Code verwendet. Nämlich:
    <div class="col-xs-11 col-sm-10 col-md-8 col-lg-6">

    Da funzt er unproblematisch. Sogar ohne row! Allerdings hat das System dann auf die leere Fläche nebendran, die sich auf dem großen Monitor ergibt, die gekachelten Artikel dargestellt. Sieht sogar ganz nett aus, auch wenn ein einsames Kachelchen übrig bleibt, das dann unter dem Text links herumlungert.
    Hat es auf der Theatertexte-Seite vielleicht auch deshalb nicht funktioniert, weil ich da die Artikel als Liste aufführe?

    Nachtrag: Ich wollte das jetzt auf der Theatertextseite mal mit "row" ausprobieren. Aber welchen "Rest" meinst du? Der gesamte Text steht in der obigen div, also muss das wohl innerhalb der div definiert werden. Fragt sich nur, wo.
     
  8. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Gemeint habe ich sowas wie das hier:

    Code:
    <div class="row">
        <div class="col-xs-11 col-sm-10 col-md-8 col-lg-6">
            <p>Dein Inhalt</p>
        </div>
    </div>
     
  9. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    Ach! Um alles drumherum! Sach dat doch jleich!
    - Jaaah! Nu klappt dat! Ich werde meine gespeicherte Anleitung sogleich ergänzen. Danke! Könnte man Kuchen als Anhang schicken, würde ich das sogleich tun. ;)
     
  10. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Zu viel Kuchen ist auch ungesund, da schaff ich ja nie das wieder los zu werden, was so zu Weihnachten drauf gekommen ist :D.

    Freut mich, dass das so klappt ;)
     
  11. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    Noch eine Frage: Mein Shop ist ja im Unterverzeichnis meiner Theaterseite. Könnte ich eigentlich Bootstrap-Code auch da verwenden statt max-width= xy% ?
     
  12. Torben Wark
    Torben Wark Gambio GmbH
    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Da du da vermutlich kein Bootstrap in der Website hast, würde ich jetzt mal nein sagen. Das Bootstrap im Shop ist auch nur im Shop nutzbar
     
  13. marit
    marit Erfahrener Benutzer
    Registriert seit:
    7. März 2014
    Beiträge:
    1.434
    Danke erhalten:
    141
    Danke vergeben:
    185
    Nö, hab ich nicht. Man muss ja auch nicht alles haben. Dafür habe ich mir aber eine Zucker-, Sorbit- und Gluten-Unverträglichkeit angeschafft. Was glaubst du, wie jetzt die Weihnachtsplätzchen und -stollen von meinen Hüften purzeln, weil ich selbst von Obst höchstens noch abgezählte Beeren essen darf. Tja, da glüht der Neid, was?