it-swarm.com.de

Liquid Layout überproportional

Ich verwende ein flüssiges Layout auf meiner Website, aber wenn ich es in meinem Browser ansehe, stelle ich fest, dass die Bilder überproportional gestreckt werden, wenn ich die Größe des Browserfensters ändere. Kann jemand helfen?

1
user6180

Stellen Sie in Ihrem CSS sicher, dass für jedes Bild entweder width oder height (normalerweise ist die Höhe angemessen) auto (die Standardeinstellung) und kein bestimmter Wert ist. Dadurch wird die Höhe (oder Breite) entsprechend der anderen Dimension und dem Seitenverhältnis des Bildes berechnet. (Verweis: CSS 2.1, Abschnitt 10.6.2 )

Wenn Sie beispielsweise max-width: 100%; height: auto; für ein Bild deklarieren, ist es nicht breiter als die Box/Spalte, in der es sich befindet, und wird vertikal skaliert, um der horizontalen Skalierung zu entsprechen. Stack Exchange führt dies mit Bildern durch, die Sie in Fragen und Antworten einfügen.

3
Kevin Reid

Sie sollten einen Testlink bereitstellen.

Auf jeden Fall müssen Ihre Bilder eine feste Breite und Höhe haben und sollten ihre Proportionen nicht ändern, während Sie die Fenstergröße ändern.

Nach einer übermäßigen Verkleinerung des Fensters wurde das gesamte Layout zu einem Chaos. Soweit ich weiß, ist dies jedoch unvermeidlich.

0
Hernantz

Sie könnten sich mit Javascript anfreunden und mehrere Bilder für Größenstufen bereitstellen oder intelligent mit bikubischer Abtastung und dergleichen verkleinern. Sie können die Größe von Rasterbildern nicht einfach ohne großen Qualitätsverlust ändern.

0
h4xnoodle