Bilder in CSS ! NICHT ! abschneiden

[Whitelake]

HAllo,
ich habe ein großes Problem. Ich möchte in meinem epub via CSS Bilder haben die nicht abgeschnitten werden wenn ich die Schriftgröße skaliere. Im Moment sind die BIlder auf meinem Ipad abgeschnitten und laufen auf der nächsten Seite weiter. Die Bilder sollten aber komplett immer auf einer Seite stehen. Hat da jemand von euch eine Idee?

[Matthias Apsel]

Om nah hoo pez nyeetz, Whitelake!

Gib den betreffenden Bildern Abmessungen in Prozent. Achte darauf, worauf sich diese Angabe beziehen muss.

Matthias

[Der Martin]

Hi,

ich habe ein großes Problem. Ich möchte in meinem epub via CSS Bilder haben die nicht abgeschnitten werden wenn ich die Schriftgröße skaliere. Im Moment sind die BIlder auf meinem Ipad abgeschnitten und laufen auf der nächsten Seite weiter. Die Bilder sollten aber komplett immer auf einer Seite stehen. Hat da jemand von euch eine Idee?

ich bin nicht sicher, ob ich dein Anliegen richtig verstehe, deshalb quatsch ich mal drauflos, in der Hoffnung, dass etwas Nützliches für dich dabei ist.

Du sprichst von "Bildern via CSS", also Hintergrundbildern. Nun ist es generell so, dass Hintergrundbilder da aufhören, wo das Element aufhört, dem sie angehören. Das Element wächst also nicht, um das Hintergrundbild vollständig aufnehmen zu können - anders als beim Elementinhalt: Der vergrößert das Element tatsächlich, wenn dessen Größe nicht auf feste Werte gesetzt wird.

Eventuell möchtest du mit background-size die Hintergrundbilder skalieren? Bei der Browserunterstützung sieht's inzwischen ganz gut aus, nur IE8 und älter sind außen vor.

Was ich an deiner Beschreibung überhaupt nicht verstehe, ist die Aussage, Bilder würden "auf der nächsten Seite weiterlaufen". Was meinst du damit? Ich habe vor allem deshalb ein Problem mit dieser Aussage, *weil* Hintergrundbilder eben am Rand des Elements enden und *nicht* irgendwo außerhalb weiterlaufen.

So long,
 Martin

[martachen]

Hallo,

Hi,

ich habe ein großes Problem. Ich möchte in meinem epub via CSS Bilder [...]

Du sprichst von "Bildern via CSS", also Hintergrundbildern. Nun ist es generell so, dass Hintergrundbilder da aufhören, wo das Element aufhört, dem sie angehören. Das Element wächst also nicht, um das Hintergrundbild vollständig aufnehmen zu können - anders als beim Elementinhalt: Der vergrößert das Element tatsächlich, wenn dessen Größe nicht auf feste Werte gesetzt wird.

Eventuell möchtest du mit background-size die Hintergrundbilder skalieren? Bei der Browserunterstützung sieht's inzwischen ganz gut aus, nur IE8 und älter sind außen vor.

Was ich an deiner Beschreibung überhaupt nicht verstehe, ist die Aussage, Bilder würden "auf der nächsten Seite weiterlaufen". Was meinst du damit? Ich habe vor allem deshalb ein Problem mit dieser Aussage, *weil* Hintergrundbilder eben am Rand des Elements enden und *nicht* irgendwo außerhalb weiterlaufen.

Es ist die Rede von epub (also ebooks, daher auch der Begriff Seite ;) ) Da wirds schwer nach Browserunterstützung zu gehen. evt ist es wichtig zu wissen, mit welchem Programm die ePubs erstellt werden (Sigil? ins Blaue geraten)

Ich habe mich leider auch noch nicht tiefer mit der erstellung von ePubs befasst um dir helfen zu können. Weiß aber auch nicht wie viele Experten es hier dafür gibt. Aber eine Idee wär noch sich mal ein freies epub zu nehemn und anzuschauen wie es dort gemacht wurde.

Aber mal so ne Frage am Rande, gibt es im Epub was wo du auf ne Art "Seitencontainer" zugreifen kannst? die Seiten werden doch dynamisch je nach Bildschirm und Skalierungsgrad generiert

So long,
Martin

martachen

[Der Martin]

Hi,

Was ich an deiner Beschreibung überhaupt nicht verstehe, ist die Aussage, Bilder würden "auf der nächsten Seite weiterlaufen". Was meinst du damit? Ich habe vor allem deshalb ein Problem mit dieser Aussage, *weil* Hintergrundbilder eben am Rand des Elements enden und *nicht* irgendwo außerhalb weiterlaufen.
Es ist die Rede von epub (also ebooks, daher auch der Begriff Seite ;) )

aha, das war mir nicht bekannt. Ich hielt "epub" beim Lesen für irgendeine vom OP kreierte Phantasieabkürzung für wasauchimmer. Es ging anscheinend um ein generelles CSS-Problem, also interessierte mich die Natur des Dokuments nicht so sehr.

Ciao,
 Martin

[MudGuard]

Hi,

Du sprichst von "Bildern via CSS", also Hintergrundbildern.

Nicht notwendigerweise: content erlaubt auch Bilder.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Du sprichst von "Bildern via CSS", also Hintergrundbildern.

Nicht notwendigerweise: content erlaubt auch Bilder.

border-image auch.

Qapla'

[Whitelake]

@@MudGuard:

nuqneH

Du sprichst von "Bildern via CSS", also Hintergrundbildern.

Nicht notwendigerweise: content erlaubt auch Bilder.

border-image auch.

Qapla'

Damit kenne ich mich leider nicht aus. Ich habe nur etwas Grundwissen in Html.

[Gunnar Bittersmann]

@@Whitelake:

nuqneH

Im Moment sind die BIlder auf meinem Ipad abgeschnitten und laufen auf der nächsten Seite weiter. Die Bilder sollten aber komplett immer auf einer Seite stehen.

Hilft img { [link:http://www.w3.org/TR/CSS2/page.html#propdef-page-break-inside@title=page-break-inside]: avoid }?

Qapla'

[Whitelake]

Ich merke ich hab mich nicht präzise genug ausgedrückt. Also nochmals der Versuch.
Ich habe eBook im epub-Format. In diesem habe ich diverse Bilder eingebunden. Mal im Hochformat mal quer. Wenn ich nun mir das Ebook auf dem Ipad anschaue und testhalber die Schrift skaliere ändert sich die Breite und Höhe des Bildes ja auch. Dabei passiert es nun, dass einige Bilder nicht einfach auf die nächste Seite gestellt werden sonder insich getrennt werden und der Seitenumbruch genau durch das Bild geht. Dies möchte ich gerne durch ein Attribut, in der CSS nach Möglichkeit, verhindern. Dort habe ich mit einem max-weight:100% alle Bilder auf Satzspiegelbreite gebracht. Dies sollte auch so bleiben. Da ich nun aber knapp 300 Bilder im eBook habe möchte ich mir nicht jedes einzeln anschauen und eine feste Höhe oder Breite in Pixel angeben.
Ich habe jetzt schon eine Weile gegoogelt und noch nix gefunden. Ich habe es erst mit einem "page-break-inside:avoid:" direkt am <img>-Tag probiert ohne Erfolg.
So ich hoffe nun das mein Problem es etwas verständlicher ist.

[Gunnar Bittersmann]

@@Whitelake:

nuqneH

Ich habe es erst mit einem "page-break-inside:avoid:" direkt am <img>-Tag probiert ohne Erfolg.

Angesichts des ':' auch kein Wunder. Typo nur hier oder in deinem Stylesheet?

Und ja, das hättest du auch gleich sagen können. Laut Spec wirkt page-break-inside auch nur auf Blockelemente, aber „User agents may also apply these properties to other elements, e.g., 'table-row' elements.“ [CSS2] Hätte ja sein können, dass es sie es auch bei 'img' anwenden …

Was, wenn du deine Bilder in figure-Elemente einschließt und für diese "display: block; page-break-inside: avoid" angibst?

Qapla'

[Whitelake]

Hallo,
ja es war nur ein Tippfehler in meinem Post.
Das mit dem Block-element habe ich auch schon versucht. Ich habe jedes Bild in einem <div>-Element stehen und diesem dann deine Vorschläge (page-break ..., display ...) verpasst. Das half auch nix.

[Gunnar Bittersmann]

@@Whitelake:

nuqneH

Das mit dem Block-element habe ich auch schon versucht.

Und wenn du für die Bilder selbst "display: block; page-break-inside: avoid" angibst?

Ansonsten fällt mir auch nichts mehr ein.

Qapla'