XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IMG Header responsive (http://xhtmlforum.de/showthread.php?t=73135)

tsaenger 01.02.2017 21:21

IMG Header responsive
 
Hallo zusammen,

ich versuche gerade mein Logo responsive zu machen, aber leider klappt das nicht so ganz.

Mittels:
Code:

.innerheadermob {
  /*height:100px;*/
  height: 100%;
  background-image: url(img/header-logo-mob.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
 }

Wir das Logo gar nicht angezeigt. Wenn ich als height 100px; angebe wird es angezeigt aber um das logo herum habe ich einen größeren weißen rahmen, da ich ja 100px angegeben habe. Mit auto habe ich schon versucht, leider auch keinen Erfolg gebhabt.
Wie muss der Tag den richtig heißen, das es immer auf die passende VIEW-Größe angepasst wird?

Vielen Dank.

Gruß Tobias

protonenbeschleuniger 01.02.2017 23:36

Zitat:

Zitat von tsaenger (Beitrag 550423)
Wie muss der Tag den richtig heißen, das es immer auf die passende VIEW-Größe angepasst wird?

Was ist denn passend?

tsaenger 02.02.2017 07:47

Passend meine ich das es automatisch die relative höhe und die richtige breite der Displaygröße hat.

etux 02.02.2017 08:05

Meine Kristallkugel sagt mir, dass das Elternelement von „.innerheadermob„ keine feste Höhe hat. :)
Oder worauf soll sich die „height: 100%;“ beziehen? ;)

.

etux 02.02.2017 08:11

Zitat:

Zitat von tsaenger (Beitrag 550426)
Passend meine ich das es automatisch die relative höhe und die richtige breite der Displaygröße hat.

https://www.w3.org/TR/css3-values/#v...lative-lengths

.

cloned 02.02.2017 08:42

Meine Kristallkugel ist gerade aus der Reparatur zurück und sagt mir, dass du mit headermob und logo-mob mobil meinst. Das kann doch nicht der korrekte Weg sein, das einzubinden? Wieso wird das Logo als Hintergrundbild eingebunden, ist es denn nicht wichtig? Und warum nicht als svg?

tsaenger 02.02.2017 09:45

Guten morgen zusammen,

wie würde ich es denn richtig einbinden. Ein Eltern-Element gibt es nicht. Da hast du recht. Wie kann ich denn dem Elemet
Code:

<div class="innerheadermob"></div>
die maximale Breite angeben ohne eine feste höhe angeben zu müssen.
Ich habe das Logo als jpg und png. Kann also beides verwenden.

Gruß und Danke

cloned 02.02.2017 09:47

Abgesehen vom root Element gibt immer ein Eltern Element.
Und wie schon vorhin gesagt: Binde das Logo auch als Bild ein und nicht als Hintergrundbild. max-width: 100% dürfte deiner Anforderung nahe kommen, sofern meine Kristallkugel das korrekt interpretiert.

tsaenger 02.02.2017 09:55

Super, danke habe ich gemacht. Es hat geklappt.

Gruß und Danke

etux 02.02.2017 11:47

Zitat:

Zitat von cloned (Beitrag 550433)
Abgesehen vom root Element gibt immer ein Eltern Element.

Dazu ein Beispiel. Nicht wirklich durchdacht, aber dennoch lustig.
viewport → html (root) → body → … :)

HTML-Code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>root parent (html) :: viewport</title>
<style>
html { position: relative; border: 2em solid #aaa; background-color: #ccc; }
body { margin: 3em 2em; background-color: #eee; }
p { top: 0; left: 0; padding: 0; }
p:first-child { position: fixed; }
p:last-child { position: absolute; }
</style>
<p>Position Fixed</p>
<p>Position Static</p>
<p>Position Absolute</p>



Alle Zeitangaben in WEZ +2. Es ist jetzt 14:16 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023