Zum Inhalt springen

Image wird zu klein dargestellt

Erstellt am 4. Januar 2017 · 7 Antworten · letzte Antwort am 9. Januar 2017

Tags: TYPO3 7, Frage

ahrlau01 ·

Hey Leute,
bei mir werden die Bilder einfach zu klein Dargestellt und ich weiß nicht warum.
Ich habs schon untersucht und eine css dürfte nicht im Spiel sein.
Es wird beim img src eine feste Größe und Höhe hinzugefügt und ich weiß nicht woher.
Welche Ursachen könnte es denn geben?

Hier mal der HTML Code:

<section id="about" class="about-section">
        <div class="container">

              
<div id="c81">
	

	<div class="ce-textpic ce-left ce-intext ce-nowrap">
	<div class="col-md-6" <div="" data-ce-columns="1" data-ce-images="1">
		
		
			<div class="ce-row">
				
					
						<div class="ce-column">
							
									<div class="ce-media">
								

							
								
								
								
									
	
			
					
	<img src="fileadmin/_processed_/f/8/csm_6_0672dcde4d.jpg" width="300" height="161" alt="">

				
		

								
							 

							
									</div>
								
						</div>
					
				
			</div>
		
		
	</div>











		
	</div>
		<div class="ce-bodytext">
		<div class="col-md-6" <p="">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <p></p>
		</div>
		</div>

		
	</div>

	


</div>


 
			
			
                
         
       
    </section>
Julian.​Hofmann ·

Wie erzeugst Du das IMG-Tag?

Das Ergebnis-HTML ist klar. Aber um Dir bei der Ursachensuche helfen zu können, müsste erkennbar sein, wo/wie Du zu diesem HTML kommst.

Norman2k ·

Es würde jetzt natürlich auch noch helfen, wenn du das entsprechende Fluid dazu postest.
Hast du vielleicht in den Konstanten eine max. Breite für Bilder angegeben die das verursachen könnte?

ahrlau01 ·

Danke schonmal für eure Antworten 😃
In den Konstanten habe ich noch gar nichts festgelegt, somit ist dort auch nichts vorhanden.

Ich habe es bis jetzt nur mit dem Standard Template von Fluid gerendert und nur einen zusätzlichen div (col-md-6) hinzugefügt:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="c{data.uid}">
	<f:if condition="{gallery.position.noWrap} != 1">
		<f:render partial="Header" arguments="{_all}" />
	</f:if>

	<div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}{f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}">
	<div class="col-md-6"
		<f:if condition="{gallery.position.vertical} != 'below'">
			<f:render partial="MediaGallery" arguments="{_all}" />
		</f:if>
	</div>
		<div class="ce-bodytext">
		<div class="col-md-6"
			<f:if condition="{gallery.position.noWrap}">
				<f:render partial="Header" arguments="{_all}" />
			</f:if>
			<f:format.html>{data.bodytext}</f:format.html>
		</div>
		</div>

		<f:if condition="{gallery.position.vertical} == 'below'">
			<f:render partial="MediaGallery" arguments="{_all}" />
		</f:if>
	</div>

	<f:render partial="Footer" arguments="{_all}" />
</div>

</html>
Julian.​Hofmann ·

Wenn Du mit Fluid Styled Content arbeitest, dann sieht mir das stark nach dem Default-Wert aus den dortigen Konstanten aus:

styles.content {
	textmedia {
		# cat=content/cTextmedia/b2; type=int+; label= Max Image/Media Width (Text): Same as above, but this is the maximum width when text is wrapped around an block of media elements. Default is 50% of the normal Max Media Item Width
		maxWInText = 300
	}
}

Siehe: typo3_src/typo3/sysext/fluid_styled_content/Configuration/TypoScript/Static/constants.txt

ahrlau01 ·

Hey Danke!

Ja das wird daran liegen. Wenn ich die default Werte beim Template überschreibe, dann wird das Bild richtig angezeigt.

Was gebe ich denn jetzt an, damit das Bild die maximale weite des Containers übernimmt?

getit ·

CSS

<div class="img"><img src="###bildsrc###" /></div>
.img > img {
  width: 100%;
  height: auto;
}