Bild zentrieren

html.de-Forum HTML, XHTML & CSS
1

Hallo Community,

ich möchte auf einer Website ein Bild zentrieren. Vielleicht kann mir dabei einer helfen, klappt nicht so ganz. Die beiden Codes hänge ich mit an, sowie zwei Bilder, die mein Problem verdeutlichen. [ATTACH]4156[/ATTACH][ATTACH]4157[/ATTACH]
Also sobald ich die Fensterbreite verändere, sollte sich das Bild zentrieren.

[HTML]

[/HTML]

* { margin: 0; padding: 0; } above, header, nav, section, aside, footer, body { display: block; } body { background-image: url(test.png); background-repeat: no-repeat; background-position: center 30px; background-size: cover; font: normal 100.01% Helvetica, Arial, sans-serif; } test { width: 30%; height: 30%; } header { margin-top: 10px; margin-left: 150px; /*margin-right: 150px;*/ height: 100%; background-color: white; /*border-bottom: 63.8px solid #04B404;*/ } ul.navigation { font-size: 90%; font-weight: bold; margin: 0 auto; margin-left: 150px; margin-right: 150px; min-width: 64.5em; text-align: center; } ul.navigation li { list-style: none; width: 11.111111%; /* 100:9 */ float: left; } ul.navigation a { background: #04B404; color: white; display: block; padding: 1.2em 0; text-decoration: none; } ul.navigation a:hover { color: #04B404; background: white; }

2

Ist aber permanent zentriert. Was du möchtest geht nur mit Javascript.

header img {
margin:0 auto;
display:block;
}
3

Oh danke für diese Erkenntnis, hätte gedacht, das ist mit css möglich. Schade, damit habe ich keine Erfahrung.
Kennst du dich damit aus? Danke für die schnelle Antwort

4

Ich denke media querys wären die bessere Lösung als ein JavaScript. Wenn Du ab einer bestimmten Viewport-Breite etwas anders gestalten willst, dann kannst Du das damit definieren.

5

OK, ich habe mal mit den Media Queries angefangen, demnach müsste ich jetzt für alle Bildschirmseitenverhältnisse unterschiedliche Bildergrößen nehmen richtig?

6

Musst Du nicht, aber wenn Du willst kannst Du das natürlich machen.

7

[HTML]/iPad Portrait/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and
(orientation:portrait)
{
}
/iPad Landscape/
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation: landscape)
{
}
/Smartphones Landscape und Portrait/
@media only screen and
(min-device-width:320px) and
(max-device-width:480px)
{
}
/Smartphones Landscape/
@media only screen and
(min-device-width:321px)
{
}
/Smartphones Portrait/
@media only screen and
(min-width:320px)
{
}
/Große Bildschirme/
@media only screen and (min-width:1824px)
{
}
[/HTML]

Das wäre mein angepester Code, so würde ich ihn nehmen

8

Hallo

so würde ich ihn nehmen

Nein, das solltest du nicht tun. Du solltest die Verschiebungen nur von der Fensterbreite abhängig machen.

Wir können dir aber erst helfen, wenn du dein Problem mal etwas genauer beschreibst. Ab welcher Fenstergröße soll das Bild zentriert werden? Zum Beispiel: Wenn das Bild kleiner als 800px ist soll das Bild zentriert werden. Deine bisherigen Angaben sind nichtssagend.

Gruss

MrMurphy

9

Der richtige Ansatz wäre die Verwendung des Grid-Layouts eines responsiven Frameworks wie Bootstrap, bei dem sich abhängig von der Viewport-Breite die Anzahl der Spalten festlegen lässt. Das Image wird dann mit width: 100%, height: auto und gegebenenfalls max-width innerhalb einer Spalte positioniert.

10

Danke danke für eure Bemühungen, habe alles nach meinen Wünschen ändern können.