[ERLEDIGT] PDF und img an Browser anpassen

zevk · 19 September 2016

Hallo an alle,

ich lerne in kleinen Schritten html und css. Jetzt gerade sitze ich an einem Problem, zu dem mir allmählich keine Alternative mehr einfällt, die ich noch probieren könnte. Darum hoffe ich, ihr könnt meinen Fehler entdecken oder mir Infos geben, was ich hier falsch mache.

Mein Ziel- Startseite:
- Logo (derzeit als PDF aus Illustrator) im oberen Bereich mittig, grün hinterlegt über die gesamte Breite des Browser Fensters
- Titelbild (jpg) darunter, ebenfalls über die gesamte Breite des Browsers
- Menu am unteren Rand (das klappt schon super in jeder Fenstergröße)

Derzeit passen sich PDF und jpg nicht an die Breite des Fensters an. Sie bleiben so groß, wie sie eben laut Pixel sind und skalieren sich nicht. Wichtig wäre mir, dass sie jeweils mittig (horizontal gesehen) positioniert sind, sich an die Fensterbreite anpassen und die Proportionen der einzelnen Elemente zueinander stimmig bleiben.

Ich hoffe, ich habe das Problem gut beschrieben.

so die index.html:
<body >
<div class="logo"><img src="image/Logo.pdf"></div>
<div id="titelbild"><img src="image/titelbild.JPG" alt="Titelbild"></div>
<div id="menu"> (...) </div>
</body>

so die format.css:
body {
height:100%;
position:absolute;
background-color:grey}

.logo {
position:absolute;
width:100%;
background-color:green;
margin-top:120px}

#titelbild {
position:relative;
width:100%;
margin-top:320px}

Und sorry, dass der code hier nur reingetippt ist. Ich habe mich gerade erst angemeldet und keine akkurate Möglichkeit gefunden.

Grüße und schon mal Danke an alle, die sich hier rein denken...
zevk

djheke · 19 September 2016

So?

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<style>

div {
  background:green;
}
div img {
 width:50%;
 margin:0 auto;
 display:block;
}
.logo {
 width:30%;
 height:100px;
 margin:0 auto;
 display:block;
}

</style>

<title>Test</title>
</head>
<body>
<div><img  class="logo" src="bild.jpg"></div>
<div><img src="bild.jpg" alt="Titelbild"></div>
</body>
</html>

zevk · 20 September 2016

danke schön, djheke, für den Tipp!
das ist ne neue Idee, das Ergebnis ist leicht anders, aber leider nicht besser.

PDF und img lassen sich in keiner Weise vom Fenster beeindrucken und behalten ihre Größe (das Bild vor allem riesig), sodass ich im Browser scrollen muss.
Mir scheint, als würde "width:100%" überhaupt keinen Einfluss haben, auch wenn ich andere Werte eingebe.
Noch ne Idee??

scbawik · 20 September 2016

zevk schrieb:
danke schön, djheke, für den Tipp!
das ist ne neue Idee, das Ergebnis ist leicht anders, aber leider nicht besser.

PDF und img lassen sich in keiner Weise vom Fenster beeindrucken und behalten ihre Größe (das Bild vor allem riesig), sodass ich im Browser scrollen muss.
Mir scheint, als würde "width:100%" überhaupt keinen Einfluss haben, auch wenn ich andere Werte eingebe.
Noch ne Idee??

Verzichte einfach auf das unnötige position:absolute;

zevk · 20 September 2016

ha! die "width=100%" muss natürlich nicht nur der div-Container haben, sondern das img selbst.
also
<img src="..." width_100%>

und das wars schon.

[ERLEDIGT] PDF und img an Browser anpassen

zevk

Neues Mitglied

djheke

Aktives Mitglied

zevk

Neues Mitglied

scbawik

Senior HTML'ler

zevk

Neues Mitglied

Neueste Beiträge