image soll über content herausragen

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

es ist schwer die passende Überschrift für die Problematik zu finden. :slight_smile:

Ich habe einen 2-spaltigen Fließtext, in dem ab und an ein Bild erscheinen soll. Das Bild ist (und soll) grösser sein als die Spalte selber.

Ich bekomme es einfach nicht hin, dass das Bild in seiner vollständigen Grösse und ohne Beschnitt dargestellt wird.

Selbst wenn ich dem content-Container ein overflow: visible gebe, wird mir das Bild nicht komplett angezeigt.

Kann mir jemand einen Denkanstoss geben? :slight_smile:

Ich habe zur Vereinfachung ein kleines Beispiel aufgebaut:

http://jsfiddle.net/tightman/L2fa9/

LG

2

Bei deinem Beispiel wird das Bild aber doch komplett dargestellt (breiter als die Spalte).

Gruss
Elroy

3

Mit welchem Browser hast Du das getestet? Das Bild wird eben nicht komplett in der Breite (200px) dargestellt.

4

Also ich sehe das das Bild über den roten Rand hinausragt.

5

Auf welchen Betriebssystem und in welchem Browser?

Bei mir unter Mac OS X und dem Chrome/Safari wird das Bild beschnitten.

6

Windows 7 - Chrome und Firefox

Gesendet von meinem iPhone mit Tapatalk

7

Wie bekomme ich das für alle BS und Browser hin?

8

Du müsstest auf so etwas verzichten:

-webkit-column-count: 2; -webkit-column-gap: 89px; -moz-column-count: 2; -moz-column-gap: 89px; column-count: 2; column-gap: 89px;

9

Leider habe ich keine andere Möglichkeit gefunden via CSS ein „selbstaufteilendes“ Spaltenlayout zu erstellen.

10

So?
http://jsfiddle.net/L2fa9/1/

11

Da wird es auch abgeschnitten.
Ich denke das geht einfach nicht, weil die Browser unterschiedlich agieren.

Nach w3c müsste es ja bis zur Mitte des „gaps“ angezeigt werden:
http://www.w3.org/TR/css3-multicol/#overflow

Ich würde so etwas jedenfalls noch nicht verwenden:
http://caniuse.com/#feat=multicolumn
Aktuell ist nahezu jedes Unternehmen mit IE9 unterwegs.

In frühestens einem Jahr interessant.

12

Dann so:
http://jsfiddle.net/L2fa9/2/

Das Bild wird so breit wie die column, und der Text erhält ein padding.

13

@Tronjer Der Ansatz ist gut, in dieser Richtung war ich auch schon unterwegs. Nur, das

um Inhalt und Image wird automatisch gebildet → Ich kann dort keine separaten Klassen vergeben.

Besteht denn die Möglichkeit via CSS zwischen „

“ und

" zu unterscheiden? Sprich, kann ich das padding bei dem im

-eingebetteten wieder zurücksetzen?

LG

14

Geht auch. Wäre dann p{} und p > img{}

15

Eben… und genau das geht eben nicht. Das padding vom Bild lässt sich nicht mehr zurücksetzen (Mac OS X, Chrome).

http://jsfiddle.net/L2fa9/3/

16

Ich habe es jetzt so gelöst: http://jsfiddle.net/L2fa9/4/