Neu Google hat auch immer etwas zu mekkern. Bilder zu zu Breit auf eigene Seiten für Mobile

[kutti]

Hallo,
Gibt es ein bestimmtes Maß welches für die Bldergröße welches ich einstellen muss, damit Goggle Mobile keine Probleme hat?
Ich habe nun schon sämtliche Bilder in den eigenen Seiten verkleinert aber trotzdem bekommt man noch mekker 😕
Langsam werden sie aber zu klein, so das sie auf einem PC zu pipselig wirken.
Kann mir jemand einen guten Rat geben?

 

[_simone_]

z.B. mit css:

img {
  max-width: 100%;
}

...oder meinst du die Dateigröße?

 

[kutti]

Hallo Simone,
vielen Dank für Deine Antwort,
Wo muss ich das denn einfügen?

 

[_simone_]

Entweder vor dem Inhalt der html-Datei so:

<style type="text/css">
img {
  max-width: 100%;
}
</style>

oder direkt beim Bild selber in html:

<img src="dein-pfad-zum-Bild.jpg" style="max-width:100%">

 

[kutti]

ok, das ist für mich einfach.
Vielen, vielen Dank für den Tip 👍

 

[Xantiva]

Öhm, eigentlich sollte es im Evo-Template ausreichen, bei einem Bild die passende Klasse zu setzen? (Inline-Styles sollten möglichst immer vermieden werden! Ansonsten viel Spaß bei einem kommenden Template-Wechsel/-Update.)

class="img-responsive"

Damit wird das gesetzt:

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

 

[_simone_]

in den eigenen Seiten

@Xantiva
In den eigenen Seiten gebe ich meist Inhalt in den CK-Editor ein. Was hat das mit einem template-Wechsel zu tun?

 

[Xantiva]

Ich weiß nicht genau, was Du alles für Styles eingibst, aber bleiben wir bei den Bildern als Beispiel:

Das Evo-Template sieht die CSS-Klasse img-responsive vor, Bilder so zu formatieren, dass sie auch responsive sind. Beim nächsten Template reicht die Formatierung vielleicht nicht mehr aus und es muss noch der Wert XY gesetzt werden. Da ich auch im CK-Editor bei den eigenen Seiten immer mit img-responsive arbeite, haben alle Bilder automatisch den neuen Wert gesetzt. Oder wenn es die Klasse im neuen Template nicht gibt, dann muss ich nur eine CSS Klasse anlegen und alle Bilder sind korrekt formatiert.

Du gibst jetzt die Formatierung direkt und nur über ein Inline-Style-Element an. Wenn Du jetzt noch den Wert XY hinzufügen musst, bist Du gezwungen, diesen Wert bei jedem Bild von Hand anzugeben. Du siehst was ich meine?

 

[_simone_]

@Xantiva
Faktisch hast du natürlich recht, aber für jemand der wenig Routine im Umgang mit css und html hat und evt. kein Child-Template, wären meine Vorschläge ein schneller Workaround.

 

[Xantiva]

Hm, was ist an einem

<img src="dein-pfad-zum-Bild.jpg" class="img-responsive">

schwieriger als an einem:

<img src="dein-pfad-zum-Bild.jpg" style="max-width:100%">

😉