Bild automatisch anpassen im Content

Du musst dem Bild die Classe "img-responsive" und keine festen Größen geben, dann passt es sich an.

 

Ich greife das Thema nochmal kurz auf - ich habe in unserem Shop www.bowling-store.de im Footer unsere Social Media Button mit einem netten Over Effekt - allerdings sind die nicht responsive und sehen auf PC, Tablet gut aus, aber auf dem Smartphone nicht optimal.
Hat jemand eine Idee, wie ich das lösen kann? Mein HTML ist rudimentär und bei CSS etc beißt es aus. Vielen Dank schon mal

HTML:

<div align="center">
    <table height="90" width="500">
        <tbody>
            <tr>
                <th colspan="4">
                <div class="imageHold" style="text-align: center;">
                    <strong><span style="font-size:18px;">Folgen Sie uns auf:</span></strong>
                </div>
                </th>
            </tr>
            <tr>
                <td align="center" height="60px" width="120px"><a href="http://www.facebook.com/profishopbowling" target="Facebook"><img alt="Facebook" border="0" height="44" onmouseout="normalImg(this)" onmouseover="bigImg(this)" src="https://www.aloha-bowling.de/shop/gx2/images/SM-facebook.png" /></a></td>
                <td align="center" height="60px" width="120px"><a href="https://www.instagram.com/profishopbowling/" target="Instagram"><img alt="Instagram" border="0" height="44" onmouseout="normalImg(this)" onmouseover="bigImg(this)" src="https://www.aloha-bowling.de/shop/gx2/images/SM-insta.png" /></a></td>
                <td align="center" height="60px" width="120px"><a href="http://www.youtube.com/user/ProfiShopGmbh" target="Youtube"><img alt="YouTube" border="0" height="44" onmouseout="normalImg(this)" onmouseover="bigImg(this)" src="https://www.aloha-bowling.de/shop/gx2/images/SM-youtube.png" /></a></td>
                <td align="center" height="60px" width="120px"><a href="http://twitter.com/ProfiShopGmbH" target="Twitter"><img alt="Twitter" border="0" height="44" onmouseout="normalImg(this)" onmouseover="bigImg(this)" src="https://www.aloha-bowling.de/shop/gx2/images/SM-twitter.png" /></a></td>
            </tr>
        </tbody>
    </table>
</div>
<script>
function bigImg(x) {
  x.style.height = "50px";
  x.style.width = "113px";
}

function normalImg(x) {
  x.style.height = "44px";
  x.style.width = "100px";
}
</script>

 

Du gibst feste Größen an.
Entweder musst Du das für jede Bildschirmgröße machen, oder ganz lassen.

Du müsstest das über Gridstalten lösen.
ganz grob und ohne es geprüft zu haben:
<div class="row">
<div class="col xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
Bild 1
</div>
<div class="col xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
Bild 2
</div>
<div class="col xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
Bild 3
</div>
<div class="col xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
Bild 4
</div>
</div>

 

Hallo Barbara,
der Code scheint mir einleuchtend, leider bekomme ich es aber noch nicht so hin wie gewünscht.
Trotz dem "row" tag werden die Bilder untereinander aufgeführt. Muss ich denn noch weitere Angaben in der CSS Datei machen?

 

ich sehe gerade, dass ich da einen Fehler drinnen habe.
So ist das, wenn man einmal erstellt und dann kopiert, statt anzupassen.
Das offset darf nur beim ersten Code stehen, weil das einen Abstand von links erzeugt.

HTML:

<div class="row">
<div class="col xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
Bild 1
</div>
<div class="col xs-6 col-md-2 col-lg-1">
Bild 2
</div>
<div class="col xs-6 col-md-2 col-lg-1 ">
Bild 3
</div>
<div class="col xs-6 col-md-2 col-lg-1">
Bild 4
</div>
</div>

 

Hallo Barbara, vorab Danke schön für Deine Mühen;
leider werden mir alle Bilder nach wie vor untereinander angezeigt. Selbst wenn ich deinen blanken Code einfüge, ändert sich nichts daran. Hast Du eine Idee woran es liegen kann? Ich nutze Chrome, kann der Browser damit zu tun haben?

 

Ändere mal bitte das col xs-6 in col-xs-6
also ein 2-" statt dem Leerfeld.

ich habe das jetzt bei mir getestet - und da geht es so

HTML:

<div class="row">
    <div class="col-xs-6 col-md-2 col-md-offset-2 col-lg-1 col-lg-offset-4">
        <a href="Link"><img alt="alt-text" class="img-responsive" src="images/mein-bildordner/bild.jpg" /></a>
    </div>

    <div class="col-xs-6 col-md-2 col-lg-1">
        <a href="Link"><img alt="alt-text" class="img-responsive" src="images/mein-bildordner/bild.jpg" /></a>
    </div>

    <div class="col-xs-6 col-md-2 col-lg-1">
        <a href="Link"><img alt="alt-text" class="img-responsive" src="images/mein-bildordner/bild.jpg" /></a>
    </div>

    <div class="col-xs-6 col-md-2 col-lg-1">
       <a href="Link"><img alt="alt-text" class="img-responsive" src="images/mein-bildordner/bild.jpg" /></a>
    </div>
</div>

 

auch ohne Erfolg, zum verrückt werden - aber jetzt auch mal grundsätzlich und blöde gefragt: Wenn ich den blanken HTML Code von Dir in den Editor einfüge, als HTML Datei speichere und im Browser öffne, erhalte ich immer die Daten untereinander. Muss ich denn noch iwo was mit CSS einfügen?

 

Bei mir passt das
siehe Footer - Kopfzeile
(Link nur für registrierte Nutzer sichtbar.)

Gib doch mal einen Link, wenn Du das bei Dir eingefügt hast, dann schaue ich mal nach Deinem css.

 

Ich habe nun nochmal alles ganz sauber übernommen und meinen Teil eingefügt und es funktioniert. Warum? ich habe keine Ahnung Danke Barbara für die Hilfe

 

Wenn es geht ist doch alles gut