Hilfe! Bild verkleinert sich nicht mehr!

[Juletomate]

Hallo Ihr Lieben,

sicherlich kann mir jemand weiterhelfen.
Ich sehe nicht mehr durch.

Habe auf meiner Bau-Seite ein großes Bild von mir eingestellt. http://www.mangagirl-tv.de/index.php/about.html
und dieses soll sich jetzt responsive verhalten. Leider macht es das nicht. Das Bild hab ich in einer Tabelle und diese innerhalb eines Artikels eingebunden.
Warum geht das nicht?

Als ich dort noch ein anders (kleiners Bild) hatte, hat es sich auch hübsch mit angepasst. Mit dem neuen kam der Stillstand.

Hab schon alles probiert aber es macht nicht was es soll. Wenn ich mir die Seite über z. B. Chrome angucke, dann ist das Bild automatisch schon kleiner und dort wird es dann
auch bei Verkleinern der Seite noch kleiner. Das hier das korrekte Verhalten funktioniert ist zwar toll, aber das Bild sollte eigentlich seine Ursprungsgröße haben solange es Platz hat.

Freue mich über Hilfe. (Ich seh den Wald vor lauter Responsive-Bäumen nicht mehr....)

Merci
Gruß
Julia

[Spooky]

Hm... ich kann im HTML/CSS source keine Anweisungen erkennen, die das Verhalten von Chrome überhaupt erzeugen würden. Da das ganze in einer Table ist (und alles ohne irgendwelche verhältnismäßigen Breitenangaben) ist das Verhalten in Chrome wohl nur reine Willkür.

Ich würde es zB so machen: https://dl.dropboxusercontent.com/s/...it9rw1/v1.html

Also vereinfacht dargestellt:

<div class="block">

    <figure>
        <img src="..." />
    </figure>

    <div class="text">
        ...
    </div>

</div> 

.block figure {
    display:block;
    float:left;
    margin:0;
    padding:0;
    max-width:33%;
}

.block figure img {
    max-width:100%;
    height:auto;
}

.block .text {
    margin-left:35%;
} 

[Juletomate]

Danke Spooky,

aber leider komm ich noch nicht klar.

Das führt leider nur dazu, daß das Bild mit der linken Spalte der Tabelle (die ich für "figure" benutzt habe) komplett schrumpft, auf die gewünschten 33%. Das Bild wächst dann natürlich innerhalb nicht wieder darüber hinaus.

.block figure img {
max-width:100%;
height:auto;

Hab ich zwar angegeben, aber das ist doch dann doppelt oder? Denn das wird doch schon für jedes Bild mitgegeben.

Die "Inhalte" werden bei mir über das Einfügen einer Tabelle irgendwie anders verschachtelt. Ich habs auch ohne Tabelle probiert, mit diversen Anweisungen, bzw. mit classen oder divs und ohne....
Ich bin verwirrt. Dachte immer ich füge ein Bild ein und durch den Standardwert schrumpfen die dann artig mit.
Hm?!
Was kann ich tun?

[Spooky]

Die "Inhalte" werden bei mir über das Einfügen einer Tabelle irgendwie anders verschachtelt. Ich habs auch ohne Tabelle probiert, mit diversen Anweisungen, bzw. mit classen oder divs und ohne....
Ich bin verwirrt. Dachte immer ich füge ein Bild ein und durch den Standardwert schrumpfen die dann artig mit.

Na einfach so geht das nicht . Wie gesagt, ich denke im Chrome funktioniert das nur deshalb zufällig so wie du willst, weil Chrome versucht "intelligenter" als die anderen Browser zu sein und die ursprünglichen Breitenverhältnisse der <td>s beizubehalten, wenn die Tabelle schrumpft. Dein mark-up lautet ja im Prinzip vereinfacht gesagt:

<table>
    <td>
        <img .../>
    </td>
    <td>
        Text
    </td>
</table> 

Im CSS ist nichts weiteres bzgl. der Größen definiert. Die linke Spalte der Tabelle ist daher zumindest so groß wie dessen Inhalt breit ist, sprich, wie breit das Bild darin ist. Und die rechte Spalte nimmt (in den meisten Browsern) dann einfach den restlichen, verfügbaren Platz ein. Ohne irgendwelchen relativen Angaben zur Größe kann sich das Bild bzw. die Spalte wo das Bild drin ist ja nicht verkleinern.

Das führt leider nur dazu, daß das Bild mit der linken Spalte der Tabelle (die ich für "figure" benutzt habe) komplett schrumpft, auf die gewünschten 33%. Das Bild wächst dann natürlich innerhalb nicht wieder darüber hinaus.

Angenommen der Container, wo sich Bild und Text darin befinden sollen ist (innen) maximal 1000px breit. Wenn dein Bild im Original zB 340px breit ist und es, wenn der Platz da ist, auf jeden Fall eben diese 340px einnehmen soll, dann gibst du dem Bild maximal eine Breite von 34%, relativ zum Container. (Der Container ist 1000px breit, 34% davon sind 340px.) Schrumpft der Container, schrumpft dann natürlich auch das Bild mit.

.block figure img {
max-width:100%;
height:auto;

Hab ich zwar angegeben, aber das ist doch dann doppelt oder? Denn das wird doch schon für jedes Bild mitgegeben.

Ja, das habe ich jetzt nur in meinem Beispiel so angegeben. Das globale figure img { ... }, das du schon hast reicht natürlich.

[Juletomate]

Wie gesagt, ich denke im Chrome funktioniert das nur deshalb zufällig so wie du willst, weil Chrome versucht "intelligenter" als die anderen Browser zu sein und die ursprünglichen Breitenverhältnisse der <td>s beizubehalten, wenn die Tabelle schrumpft.

Aber welche sind denn die ursprünglichen Breitenverhälnisse der tds? Wie umgehe ich, das der Chrome oder auch der Safari das Bild von vornherein verkleinern, wenn ich doch noch gar nichts definiert habe?!

Im CSS ist nichts weiteres bzgl. der Größen definiert. Die linke Spalte der Tabelle ist daher zumindest so groß wie dessen Inhalt breit ist, sprich, wie breit das Bild darin ist. Und die rechte Spalte nimmt (in den meisten Browsern) dann einfach den restlichen, verfügbaren Platz ein. Ohne irgendwelchen relativen Angaben zur Größe kann sich das Bild bzw. die Spalte wo das Bild drin ist ja nicht verkleinern.

Gut, aber wie gehe ich nun genau vor? Wie sage ich dem Bild das es sich relativ zur ganzen Tabelle verhalten soll? Denn was Du sagst macht ja auch Sinn aber funktioniert so nicht:

Angenommen der Container, wo sich Bild und Text darin befinden sollen ist (innen) maximal 1000px breit. Wenn dein Bild im Original zB 340px breit ist und es, wenn der Platz da ist, auf jeden Fall eben diese 340px einnehmen soll, dann gibst du dem Bild maximal eine Breite von 34%, relativ zum Container. (Der Container ist 1000px breit, 34% davon sind 340px.) Schrumpft der Container, schrumpft dann natürlich auch das Bild mit.

Wenn ich also dem Bild sage, das es eine maximale Breite von 34% haben soll, dann verkleinert sich natürlich das Bild auf 34%. Dann hab ich versucht die erste td auf maximale Breite von 34% einzustellen, aber auch das ändert nichts. Dann dachte ich es hilft der Text-td auch noch zu sagen wie breit sie maximal sein kann also die übrigen 66%. Auch das hilft nicht. Selbst, wenn ich der Text-td ne Mindestbreite von 66% gebe, dann schrumpft sie immer noch auf gefühlte 5 % in ner ganz schmalen Bildschirmansicht. Das ist doch so nicht richtig.
Der Textcontainer tut ja eigentlich was er soll, er schrumpf, aber das Bild nicht. Bei Dir gehts auch so schön, aber ich begreife leider nicht wie ich das auf meine Seite anwenden kann. Sorry, ich brauche ne Anfänger-Anleitung.

Danke
VG
Julia

[Spooky]

Wenn ich also dem Bild sage, das es eine maximale Breite von 34% haben soll, dann verkleinert sich natürlich das Bild auf 34%.

Du sprichst hier jetzt vom <img> das bereits im <td> ist, oder? Das geht natürlich nicht, weil das Bild dann 34% der Breite des <td> einnimmt. Du willst ja eigentlich, dass das <td> 34% (oder was auch immer) einnimmt, und darin das Bild dann 100%.

Wenn ich also dem Bild sage, das es eine maximale Breite von 34% haben soll, dann verkleinert sich natürlich das Bild auf 34%. Dann hab ich versucht die erste td auf maximale Breite von 34% einzustellen, aber auch das ändert nichts. Dann dachte ich es hilft der Text-td auch noch zu sagen wie breit sie maximal sein kann also die übrigen 66%. Auch das hilft nicht. Selbst, wenn ich der Text-td ne Mindestbreite von 66% gebe, dann schrumpft sie immer noch auf gefühlte 5 % in ner ganz schmalen Bildschirmansicht. Das ist doch so nicht richtig.
Der Textcontainer tut ja eigentlich was er soll, er schrumpf, aber das Bild nicht. Bei Dir gehts auch so schön, aber ich begreife leider nicht wie ich das auf meine Seite anwenden kann. Sorry, ich brauche ne Anfänger-Anleitung.

Danke
VG
Julia

Verwende einfach keine Tables . Wie genau baust du dir eigentlich diese Table momentan, einfach über TinyMCE Funktionen?

[Spooky]

Aber zur Anleitung: ich würde an deiner Stelle in dem jeweiligen Artikel einfach nur einen ganz normalen Text Content mit Bild hinzufügen (also nicht das Bild über TinyMCE). Diesem Content gibst du dann eine beliebige Klasse, die nenne ich nachfolgend einfach foo. Wenn du so etwas erstellst kommt zB folgender HTML code von Contao dabei raus (innerhalb des Artikels):

<div class="ce_text foo block">
    <figure class="image_container">
        <img ... />
    </figure>
    <p>...</p>
</div> 

Und in dein Stylesheet fügst du dann noch zusätzlich folgendes hinzu:

.foo figure {
    display:block;
    float:left;
    margin:0;
    padding:0;
    max-width:34%;
}

.foo p {
    margin-left:36%;
} 

Die Stylesheet Details und die Prozentangaben die du tatsächlich brauchst musst du ggf. dann noch selbst ändern.

[Juletomate]

DANKE!

Ich blicke wieder durch.

Mußte noch ein bißchen anpassen, denn das mit dem "figure" klappt bei mir so irgendwie nicht. Figure wird beim mir nicht generiert.
Hab einfach stattdessen den image container genommen, also vereinfacht:

HTML:

<div class="ce_text about_artikel block">
<div class="image_container">
<img "...jpg">
</div>
<p> Text </p>
</div>

und das CSS dazu (noch etwas gepimpt, um meine Außenabstände wieder reinzubekommen):

.about_artikel .image_container {
    max-width:34%;
    float:left;
    display:block;
    margin-top:0;
    margin-bottom:2%;
    margin-left:2%;
    padding:0;
}

.about_artikel {
    margin-top:2%;
    padding:0;
}

.about_artikel p {
    margin-right:2%;
    margin-left:37%;
    padding-left:10px;
}

...aber mit welchen Abwandlungen ist ja "wurscht". Hauptsache es läuft! (Jetzt muß ich nur noch irgendwie das onmouse-hover-Bild wieder reinbekommen. Das war so schön einfach über TinyMCE. Aber das schaff ich irgendwie, wenn der Baulärm draußen meinem Hirn wieder Platz zum Denken läßt)

MERCI Spooky!

EDIT:
PS: Ach wie schön es doch ist minutenlang ein Bildschirm-Fenster groß und klein zu ziehen und es funktioniert noch immer. Wunderbar! ;-)

[Spooky]

Ah, ja bin von Contao 3 ausgegangen, ich nehme an im Contao 2 template wird <figure> noch nicht verwendet, aber prinzipiell ist das ja egal, ja .