Grafik in Kategorie-Beschreibung passt sich nicht der Größe des Browsers an!

[zwenner]

Hallo,

 

Ich habe in der Kategorie-Beschreibung eine zweispaltige Tabelle (linke Spalte mit Grafik, rechte Spalte mit Text) angelegt.

Nun hätte ich gern das sich die darin enthaltene Grafik in der Größe automatisch an das Fenster anpasst wenn es verkleinert wird.

 

Im Idalfall soll der Text unter die Grafik rutschen wenn das fenster zu schmal wird um beides nebeneinander anzuzeigen.

 

Hier noch ein ähnliches Beispiel wie ich es gern hätte:  http://perfumes.equivalenza.com/en/pages/family/3/

 

Gruß Sven

[Lausli]

Das geht mit float

 

Das mit dem Bild anpassen ist recht einfach. Da ich deinen Code nicht kenne gebe ich mal einen Link:

http://www.html-seminar.de/bilder-bei-responsive-design.htm

<p>
Sonstiger Inhalt<br />
<img class="skaliere" ... /><br />
Weiterer Inhalt
</p>

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

Aber da HTML5 ja eher der Fall ist:

http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen

[Whiley]

Hallo,

 

Ich habe in der Kategorie-Beschreibung eine zweispaltige Tabelle (linke Spalte mit Grafik, rechte Spalte mit Text) angelegt.

Nun hätte ich gern das sich die darin enthaltene Grafik in der Größe automatisch an das Fenster anpasst wenn es verkleinert wird.

 

Im Idalfall soll der Text unter die Grafik rutschen wenn das fenster zu schmal wird um beides nebeneinander anzuzeigen.

 

Hier noch ein ähnliches Beispiel wie ich es gern hätte:  http://perfumes.equivalenza.com/en/pages/family/3/

 

Gruß Sven

 

Hallo Sven,

 

Tabelle in einem Responsiv-Layout - das würde ich nochmal überdenken

 

Das machst du besser ohne Tabelle, etwa so wie das in dem von dir gepostetem Link gelöst wurde.

Google mal nach "css" und "float", du wirst hunderte von Anleitungen finden wie du das ohne Tabelle lösen kannst, z.B. hier:

https://www.mediaevent.de/tutorial/css-positionieren-float.html

 

Für die Bilder gibt es in Prestashop eine eigene class. Der Aufruf erfolgt etwa so:

<p><img class=img-responsiv" scr="http.//.....

 

Grüsse

Whiley

[zwenner]

Vielen Dank, hat soweit super funktioniert!

Ich bekomme es grad nur nicht hin den Text vertikal zu zentrieren.

 

Ich habe es bereits mit vertical-align: middle; versucht, da tut sich aber nichts.

[Whiley]

Poste mal deinen momentanen code

[zwenner]

<style type="text/css" media="screen">
    .float1 { float: left; width: 40%;}
    .float2 { float: left; width: 60%;}
</style>

<div class="float1">

<center><p><img class="img-responsiv" src="http://test.png" width="450"; height="450"; /></p></div></center>

<div id="float2">
   
<p>{$category->description}</p>


</div>