[TYPO3-german] Bildbreite in Div als max-width-style eintragen

Marco Brüggemann marco at schauart.de
Sun Aug 31 12:28:43 CEST 2014


Hallo Leute,

Ich möchte responsiv-Webdesign nutzen. Das klappt auch, ich habe aber 
Probleme mit den Standard-T3-Bildpositionen:

Eine HTML-Konstruktion ist hier zum Beispiel:

<div data-csc-cols="1" data-csc-images="1" class="csc-textpic-imagewrap">
   <figure class="csc-textpic-image csc-textpic-last">
BILD
   </figure>
</div>

und die andere ist

<div data-csc-cols="1" data-csc-images="1" class="csc-textpic-imagewrap">
   <div class="csc-textpic-center-outer">
     <div class="csc-textpic-center-inner">
       <figure class="csc-textpic-image csc-textpic-last"> <span 
data-picture="">
BILD
       </figure>
     </div>
   </div>
</div>

Die Bilder werden erst dann richtig an den äußeren Rahmen angepasst wenn 
ich als maximale Bildbreite die tatsächliche maximale Bildgröße angebe 
und als weite dann 100%:

<div data-csc-cols="1" data-csc-images="1" class="csc-textpic-imagewrap" 
style="max-width: 458px; width: 100%;">
   <figure class="csc-textpic-image csc-textpic-last">
BILD
   </figure>
</div>

und die andere ist

<div data-csc-cols="1" data-csc-images="1" class="csc-textpic-imagewrap" 
style="max-width: 458px; width: 100%;">
   <div class="csc-textpic-center-outer" style="max-width: 587px; width: 
100%;">
     <div class="csc-textpic-center-inner" style="max-width: 587px; 
width: 100%;">
       <figure class="csc-textpic-image csc-textpic-last"> <span 
data-picture="">
BILD
       </figure>
     </div>
   </div>
</div>

Das mache ich zur Zeit mit einem Java-Script:

$(window).load(function() {
     jQuery("div.csc-textpic-center-outer, 
div.csc-textpic-imagewrap").each(function(){
         x=$(this).width();

         $(this).css("max-width",x + "px");
         $(this).css("width","100%");

$(this).children("div.csc-textpic-center-inner").css("max-width",x + "px");
$(this).children("div.csc-textpic-center-inner").css("width","100%");
     });
});

Das Problem ist, wenn ich die Webseite mit einem schmalen Browserfenster 
öffne, dann ließt das Java-Script die kleine Bildbreite aus und trägt 
diese in das HTML ein.
Mach ich dann das Browserfenster breiter (oder kippe das iPad vom 
Hochformat ins breite Format) dann wird die schmale Breite des Bildes 
beibehalten.
Daher möchte ich die original Bild-breite dort als Eintrag haben ... und 
nicht die Bildbreite die durch Java-Script bestimmt wird.

-------------------------------------------------------------------------------------

Wie kann ich die Breite des "größtmöglichen" Bildformates dieses Bildes 
hier in die Divboxen eintragen?
Das müsste doch mit TypoScript gehen ... oder?

Die Divboxen die Betroffen sind sind alle mit den CSS-Klassen:
div.csc-textpic-center-outer, div.csc-textpic-center-inner, 
div.csc-textpic-imagewrap

Vielen Dank für Eure Hilfe,
Marco.
-- 


More information about the TYPO3-german mailing list