HTML Gerüst

Chemieka · Beitrag von **Chemieka** » 06.01.2022, 11:51

Hallo

Ich binde ein Webseitenelement so ein:
HTML Gerüst
<img src="https://www.yr.no/en/content/2-2946980/meteogram.svg" width="1100" height="500" />

Damit kann man gut die Größe einstellen.

Zu meiner Frage. Ich würde gern den oberen Teil rausschieben also die X Y Position ins negative verändern. Mit IObroker bekomme ich das hin aber geht das auch direkt in Mediola per HTML Code? Ich denke ja aber wie muss das aussehen?

Fonzo · Beitrag von **Fonzo** » 06.01.2022, 12:25

Chemieka hat geschrieben: ↑
06.01.2022, 11:51
Ich würde gern den oberen Teil rausschieben also die X Y Position ins negative verändern.

Das Bild entsprechend zurechtschneiden machst Du mit CSS und object-fit.
Falls Du das nicht selber hinbekommst, kannst Du ja mal ein Bild posten wie Du denn gedenkst, das es am Schluss genau aussehen soll, dann kann man Dir eher Hilfestellung geben.

Fonzo · Beitrag von **Fonzo** » 06.01.2022, 12:42

Chemieka hat geschrieben: ↑
06.01.2022, 11:51
aber geht das auch direkt in Mediola per HTML Code?

Ansonsten verändert man die Werte am besten per CSS also nichts im Tag direkt setzten.

Im Header ergänzt Du eine Klasse crop für das img
Dokument Beginn:

Code: Alles auswählen

<!DOCTYPE html><html><head><meta charset="utf-8" /><style>html{background:transparent;color:#000;font-family:sans-serif;padding:10px;}


    .crop img {
        width: 1100px;
        height: 500px;
        margin: -75px 0 0 -10px;
    }
</style></head><body>

Im Hauptbereich setzt Du noch ein div Tag mit der crop Klasse

Code: Alles auswählen

<div class="crop">
  <img src="https://www.yr.no/en/content/2-2946980/meteogram.svg"/>
</div>

Besser ist es aber je nachdem was Du genau erreichen willst object-fit (s.o.) zu nutzten.

Chemieka · Beitrag von **Chemieka** » 06.01.2022, 13:37

Hatte im Netz folgenden Code gefunden:

<style>
#wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-10px; top:-75px; overflow: hidden; }
#frame { width: 1620px; height: 3500px; position:relative; left:-10px; top:-75px; }
#frame { -ms-zoom: 1.55; -moz-transform: scale(1.55); -moz-transform-Origin: 0px 0; -o-transform: scale(1.55); -o-transform-Origin: 0 0; -webkit-transform: scale(1.55); -webkit-transform-Origin: 0 0; }
</style>
<div id="wrap">
<iframe id="frame" src="https://www.yr.no/en/content/2-2946980/ ... "></iframe>
</div>

damit gehts auch.
Ist vielleicht für jemanden der sich auskennt viel zu viel. Aber das Ergebnis stimmt.

HomeMatic-Forum / FHZ-Forum

HTML Gerüst

HTML Gerüst

Re: HTML Gerüst

Re: HTML Gerüst

Re: HTML Gerüst