Bild in Spalte gequetscht

Hallo,

ich glaube, das ist nicht normal, da die Spalten an die Bildschirmgröße angepasst werden. Normalerweise wird bei responsiven Templates die Eigenschaft `max-width: 100%` auf alle Bilder angewendet, um sie responsiv zu gestalten. Fehlt diese Eigenschaft, haben die Bilder eine feste Größe und funktionieren nicht auf kleinen Bildschirmen.

Im Anhang sehen Sie, was normalerweise bei drei Spalten passiert.

Viele Grüße,

Obwohl TOs Problem schon lange zurückliegt, muss ich mich hier melden, da ich dasselbe Problem habe. Ich habe die Ursache gefunden: Es tritt auf, wenn man Bilder skaliert und dabei einen Bildparameter im Dialogfeld „Bildeigenschaften“ ändert (oder heißt es „Bildeigenschaften“? Ich verwende nicht die englische Version).
Beispiel: Ich füge ein Bild in meinen Artikel ein und skaliere es per Drag & Drop auf 400x300px. Im Quellcode steht: `
width="400" height="300"`.
Doppelklicke nun auf das Bild, um das Dialogfeld „Bildeigenschaften“ zu öffnen, und klicke auf „OK“. Der Quellcode ändert sich nun zu:
`img style="width:400px; height:300px;"`
Es ist einfach eine andere Möglichkeit, den Größenparameter in HTML anzugeben, aber die `style="..."`-Variante führt aus irgendeinem Grund dazu, dass Bilder beim Ändern der Browserfenstergröße verzerrt werden.

Gibt es eine Möglichkeit, den Code anzupassen?

Hallo,

vielen Dank für das Feedback. Könntest du mir bitte einen Screenshot der von dir genannten Bildeinstellungen schicken?
Übrigens: Verwende keine Ziehpunkte, um Bilder in deinen Inhalten zu skalieren. Dadurch werden die Bilder in unnatürlichen Abmessungen angezeigt, was nicht nur unnötig groß ist, sondern auch zu einer schlechten Darstellungsqualität führt. Außerdem kann es Probleme mit der responsiven Darstellung verursachen.

Viele Grüße,

Vielen Dank, Tristan, für deine Antwort. Natürlich kann ich Screenshots anfertigen.

Ich habe ein einfaches Beispiel mit einem Bild in der Originalgröße 800x535px erstellt.

1. Ich habe es direkt im DropEditor mithilfe der Ziehpunkte skaliert (übrigens ist das völlig in Ordnung, solange die Proportionen gewahrt bleiben). Im verkleinerten Browserfenster ist das Bild im richtigen Verhältnis und vollständig responsiv. [resized_in_dropedit_by_handles.png]

2. Dann habe ich auf das Bild doppelgeklickt, um den Eigenschaftendialog zu öffnen, aber nichts geändert – nur auf „OK“ geklickt. Wie du sehen kannst, hat sich der Quellcode geändert, und dasselbe Bild wird im selben verkleinerten Browserfenster verzerrt und nicht mehr responsiv angezeigt. [resized_by_properties-dialog.png]

Ich hoffe, das verdeutlicht das Problem und hilft, DropEditor verbessern (ich halte ihn für den besten Joomla-Editor).

Übrigens, noch eine andere Frage: Wäre es möglich, im Eigenschaftendialog von Bildern ein Feld für die Bildklasse einzuführen? Das würde Klassenwechsel etwas erleichtern.

Viele Grüße, Frank

Hallo,


okay, ich glaube, ich hab's verstanden. Das Problem stammt vom alten Bildbearbeitungstool, das im Editor integriert war (nur die Eigenschaft „Bild-Button“).
Wir arbeiten an einer aktualisierten Version von Droppics , die das Problem durch die Generierung von dynamischen Vorschaubildern behebt.

Der erste Hinweis zur natürlichen Bildgröße ändert nichts am Problem, er ist nur ein Tipp. Eine zu große Bildgröße verlangsamt Ihre Website und wird von allen SEO-Analysetools als Fehler erkannt. In Chrome wurde das Tool zum Bearbeiten von Bildausschnitten aus dem Editor entfernt.

Viele Grüße,

Okay, das wäre ein tolles Update.

Bisher habe ich das mit droppics (Pro) manuell gemacht, indem ich eine Kopie in der gewünschten Größe erstellt habe. Ein automatisch generiertes Vorschaubild wäre viel komfortabler – sehr willkommen! Mein Problem dabei ist, dass Bilder, die in Artikeln in ihrer maximalen Größe eingefügt werden, auf hochauflösenden Bildschirmen etwas unscharf aussehen. Beispielsweise sieht ein 400x300px großes Bild in einem Artikel auf meinem Büromonitor mit 72 dpi gut aus, auf einem Tablet mit weniger als 200 dpi jedoch unscharf (verursacht durch die Browser-Skalierung). Ein Bild mit den physischen Abmessungen 600x448px, das auf 400x300px skaliert wurde, sieht auf HiRes-Bildschirmen viel schärfer aus. Die Dateigrößen sind zwar etwas größer, aber nicht so viel. Für HiRes-Bildschirme kenne ich keine andere Möglichkeit, Bilder scharf darzustellen.

Viele Grüße, Frank

Okay, das wäre ein tolles Update.

Früher habe ich das manuell mit droppics (Pro) gemacht, indem ich eine Kopie in der gewünschten Größe erstellt habe. Ein automatisch generiertes Vorschaubild wäre viel komfortabler – sehr willkommen. Mein Problem dabei ist, dass Bilder, die in Artikeln in ihrer maximalen Größe eingefügt werden, auf hochauflösenden Bildschirmen etwas unscharf aussehen. Beispielsweise sieht ein 400x300px großes Bild in einem Artikel auf meinem Büromonitor mit 72 dpi gut aus, auf einem Tablet mit 200 dpi jedoch unscharf (verursacht durch die Browser-Skalierung). Ein Bild mit den physischen Abmessungen 600x448px, das auf 400x300px skaliert wurde, sieht auf HiRes-Bildschirmen viel schärfer aus. Die Dateigrößen sind zwar etwas größer, aber nicht so viel. Für HiRes-Bildschirme kenne ich keine andere Möglichkeit, Bilder scharf darzustellen.

Viele Grüße, Frank.

PS: Entschuldigung, dass ich es erneut gepostet habe. Das System hat meinen Text wegen der Verwendung eines Pfeilsymbols abgeschnitten. Ich werde in meinen nächsten Nachrichten sorgfältiger sein.