Bilder in Habpanel auf Template-Größe reduzieren
Verfasst: 7. Aug 2018 20:30
Hallo an Alle,
ich bin neu hier. Habe mir vor einigen Wochen openhab2 auf einem RaspberryPi 3B installiert.
An diesem ist zusätzlich ein 7"-PiDisplay befestigt, über welches u.a. das Habpanel angezeigt wird.
Neben Wetter, Temperaturen, Luftfeuchten und Steckdosen-Statii möchte ich mir einen digitalen BIlderrahmen bauen.
Jede Stunde greift der Raspi per ssh auf mein NAS zu, holt sich drei Zufallsbilder und steckt sie in den html-Ordner. Das klappt soweit.
Ich habe mir das "Carousel" in den Beispieltemplates umgebastelt und lasse die Bilder anzeigen, auch das klappt.
Allerdings habe ich ein Problem:
Die Bilder haben verschiedene Formate und Auflösungen.
Ich würde gern alle Bilder gleich groß darstellen. Zum Teil ragen sie jetzt sogar über das Template herrüber.
Ich hatte überlegt, es über die css-Funktion "object-fit" zu realisieren (s.u.). Leider funktioniert es nicht, als ob es gar nicht beachtet wird.
Gibt es sonst eine Möglichkeit css-Code in einem Template unterzubringen?
Oder kennt jemand eine Möglichkeit die Bider entsprechend einzupassen?
Danke schon mal,
viele Grüße,
Minfred
ich bin neu hier. Habe mir vor einigen Wochen openhab2 auf einem RaspberryPi 3B installiert.
An diesem ist zusätzlich ein 7"-PiDisplay befestigt, über welches u.a. das Habpanel angezeigt wird.
Neben Wetter, Temperaturen, Luftfeuchten und Steckdosen-Statii möchte ich mir einen digitalen BIlderrahmen bauen.
Jede Stunde greift der Raspi per ssh auf mein NAS zu, holt sich drei Zufallsbilder und steckt sie in den html-Ordner. Das klappt soweit.
Ich habe mir das "Carousel" in den Beispieltemplates umgebastelt und lasse die Bilder anzeigen, auch das klappt.
Allerdings habe ich ein Problem:
Die Bilder haben verschiedene Formate und Auflösungen.
Ich würde gern alle Bilder gleich groß darstellen. Zum Teil ragen sie jetzt sogar über das Template herrüber.
Ich hatte überlegt, es über die css-Funktion "object-fit" zu realisieren (s.u.). Leider funktioniert es nicht, als ob es gar nicht beachtet wird.
Gibt es sonst eine Möglichkeit css-Code in einem Template unterzubringen?
Oder kennt jemand eine Möglichkeit die Bider entsprechend einzupassen?
Code: Alles auswählen
<div style="height: 610px">
<div uib-carousel active="0" interval="5000" no-wrap="false">
<div uib-slide index="0">
<img src="http://192.168.178.100:8080/static/Pictures/bild1.jpg" style="margin:auto;object-fit:cover"/>
</div>
<div uib-slide index="1">
<img src="http://192.168.178.100:8080/static/Pictures/bild2.jpg"/>
</div>
<div uib-slide index="2">
<img src="http://192.168.178.100:8080/static/Pictures/bild3.jpg"/>
</div>
</div>
</div>viele Grüße,
Minfred
