Responsive Bilder in einer fluid-Breitentabelle (max-width)

sich das folgende Stück Code:Responsive Bilder in einer fluid-Breitentabelle (max-width)

HTML:

<div> 
    <img src="http://placehold.it/600x150" /> 
</div>

CSS:

div { max-width: 200px } 
img { max-width: 100% }

The Bild wird nie breiter als 200px, unabhängig von seiner nativen Größe. So weit, ist es gut.

Hier ist die Geige: http://jsfiddle.net/PeAAb/

Wenn jedoch das übergeordnete Element hat seine display Satz table:

div { max-width: 200px; display: table }

das Bild erweitert magisch auf seine native Breite, die table mit ihm erweitern .

Hier ist die Geige: http://jsfiddle.net/PeAAb/1/

Gleiche mit einer tatsächlichen Tabelle passiert: http://jsfiddle.net/PeAAb/2/

Frage: Ist das erwartete Verhalten? Wenn ja, was kann getan werden, um dieses Problem zu umgehen?

der width der Einstellung Eltern (auch eine prozentbasierte Breite) statt max-width quetscht das Bild korrekt wieder in seine Box, ist aber keine Lösung. Ich brauche den Elternteil, um flüssig zu sein (ich benutze das für die Hauptstruktur der Seite, so dass ich the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width haben kann).

Auch setting table-layout to fixed scheint no effect hier zu haben.

Quelle

2012-08-08 Joseph Silber

Ich versuche in SharePoint 2010 etwas Ansprechbares zu erstellen, das eine ziemlich üble Angewohnheit hat, verschachtelte Tabellen um Dinge herum zu wickeln. Wenn Sie eine Lösung dafür kennen (die bis IE8 funktioniert), würde ich gerne davon erfahren. @ pKs Lösung (Anzeige: Block;) scheitert in IE8/9 hier :( –

Das Problem hierbei ist, dass eine Tabelle (oder ein div-Set, das sich wie eine Tabelle verhält) kein Blockelement ist und max-width nur für Blockelemente gilt. Mein einziger Vorschlag für Sie ist, das Tabellenelement in ein div mit display: block; einstellen.

Hier ist die Geige, falls es Sie interessiert: http://jsfiddle.net/PeAAb/4/

Quelle

2012-08-08 22:06:48

Danke für Ihre * richtige * Antwort, aber in meinem Fall hilft mir das nicht. Schauen Sie sich [meine Demo] an (http: // jsfiddle.net/659JN/) Es funktioniert korrekt in Webkit, aber nirgendwo sonst.Ein anderes Element darin einzupacken [hilft nicht] (http://jsfiddle.net/6BWCw/). –

Ich akzeptiere diese Antwort widerwillig, da sie korrekt ist. Es löst das Problem jedoch nicht. –

Joseph, danke für die Annahme. Ich wünschte, ich hätte eine Lösung für Ihr Problem, da ich normalerweise keine "das kann nicht getan werden" -Antworten veröffentlichen - aber nach einigen Recherchen, kombiniert mit meinen eigenen persönlichen Erfahrungen, konnte ich nicht aufkommen eine gute Lösung für Ihr Problem. Tatsächlich hat mich das ziemlich verwirrt; Ich freue mich darauf, von jedem zu hören, der das besser lösen kann als ich. –

-1

Ich weiß, das ziemlich spät ist, fand aber die Antwort, das ist ziemlich einfach und super einfach entpuppte, table-layout: behoben.

hier gefunden: http://blog.room34.com/archives/5042

Wie auch immer, dies für alle, die eine Antwort auf dieses Rätsel suchen ist, wie ich war.

Quelle

2014-01-04 01:09:32 manonatelier

Ich würde den Artikel kurz erklären oder paraphrasieren, warum 'table-layout: fixed' hier eine Antwort ist, zumal das OP gesagt hat, dass das nicht für ihn funktioniert hat. – Dan

Dies funktioniert nur mit einer angegebenen Breite. Die Frage war, wie dies mit einem 'max-width'-Set erreicht werden kann. Der Elternteil muss eine Flüssigkeitsbreite haben. –

Responsive Bilder in einer fluid-Breitentabelle (max-width)

Antwort

Verwandte Themen