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?:-)
Versuche mal inline-CSS (https://www.w3schools.com/css/css_dimension.asp) irgendwo im image <div>-Container einfügen
style="height: 100%;"
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:
<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>
Ah, ok. Versuche mal folgendes: ersetze data-size="100%" durch data-height="100%" data-width="auto"
<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 (https://wiki.fhem.de/wiki/FTUI_Widget_Image#Attribute).
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?