Image Widget - Size auf Höhe statt Breite

[StephanFHEM]

ich habe gerade mein TabletUI umgebaut und bin dabei auf folgendes Problem gestoßen:
In einem <li>-Gerüst kann ich ein Image mit data-size="100%" auf die komplette Breite des data-sizex aus dem <li> bringen. Die Höhe wird proportional angepasst. Jetzt hab ich ein Bild was sehr lang aber wenig breit ist. Damit ragt es unten über das li-Feld hinaus. Klar kann ich size manuell passend stellen, dann passt es aber nur auf einem End-Gerät. Ich bräuchte genau das Gegenteil von data-size welches mir das Bild auf 100% Höhe setzt und die Breite proportional anpasst.

Ist das möglich und wenn ja, wie?

[yersinia]

Versuche mal inline-CSS irgendwo im image <div>-Container einfügen

Code Auswählen Erweitern

style="height: 100%;"

[StephanFHEM]

das bringt leider auch keine Änderung.... hab verschiedene Varianten ausprobiert..

hier zum besseren Verständnis mein aktueller Code (Darstellung Kamera-Bild, bei anklicken öffnet er ein Popup wo das Bild größer dargestellt wird. Es geht aber um das erste kleinere Vorschau-Bild. Das Data-Size was ich hier gewählt habe passt bei dem einem Gerät aber bei anderen wg. der Unterschiedlichen Auflösung nicht. Die Bereiche sind übrigens flexibel und nicht auf Pixel festgelegt:

Code Auswählen Erweitern

<li data-row="1" data-col="7" data-sizex="3" data-sizey="4" class="bg-darkblue-trans">
<header class="bg-darkblue">Kamera Hasenstall</header>
<div data-type="popup" data-height="95%" data-width="90%" data-draggable="false">
<div data-type="image" data-url="http://123.123.123.1:1234/" data-size="57%" data-refresh="5" data-opacity="1" class="nocache"></div>
<div class="dialog">
         <header class="bg-darkblue">Hasenstall</header>
     <div class="card items-center centered">
          <div data-type="image" data-url="http://123.123.123.1:1234/" data-size="100%" data-refresh="5" data-opacity="1" class="nocache">
                  </div>
             </div>
            </div>
</div>
</li>

[yersinia]

Ah, ok. Versuche mal folgendes: ersetze data-size="100%" durch data-height="100%" data-width="auto"

Code Auswählen Erweitern

<div data-type="image" data-url="http://123.123.123.1:1234/" data-height="100%" data-width="auto" data-refresh="5" data-opacity="1" class="nocache">
</div>
Steht übrigens auch im Wiki.

[StephanFHEM]

Hatte ich auch schon probiert und er hat das Bild in voller Auflösung dargestellt. Also die Grenzen des <li> gar nicht mehr beachtet...

edit: habs jetzt nochmal so angegeben und er zeigt das Bild in der Länge in voller Auflösung an. In der Breite macht er es auf 100% des <li>'s damit ist das Bild langgezogen und nicht mehr proportional. die Höhe bezieht sich anscheinend auf die Bild-Auflösung und nicht auf die Höhe des Widgets. Absicht oder Bug?