• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder und andere Elemente werden im Browser zu groß angezeigt

?

<?php?>

Neues Mitglied
Hi!

Ich bin neu hier im Forum und hätte gleich eine Frage :D

Wahrscheinlich ist dies ein absolutes Anfänger-Problem, obwohl ich keiner bin, aber vorher ist mir dieses Problem nie unter gekommen oder bewusst gewesen und erGoogeln lässt es sich auch nicht.

Ich habe mit Photoshop eine Homepage erstellt und möchte sie nun mittels HTML und CSS als Website darstellen.

Wenn ich die einzelnen Grafik-Elemente einbinde (mittels "img" tag), werden sie zu groß angezeigt.

Mein Logo hat z.B. im Photoshop eine Auflösung von 275x98px, wenn ich dieses als PNG-Datei exportiere ist die Auflösung immer noch gleich, wenn ich es z.B. mit "Windows-Fotoanzeige" öffne, hat es immer noch die gleiche Größe, nur sobald ich es in die HTML-Datei einbette (oder das Bild mittels Firefox öffne) scheint es viel größer!

Damit es nicht nur subjektiv ist, habe ich einen Screenshot angefertigt und im Photoshop ausgeschnitten und dort ist es dann 346x125px groß (also um den Faktor 1,26 größer, somit zufällig (oder nicht?) fast genau einen halben Zoll).

Zuerst dachte ich mir, dass es irgendwie mit den ppi zusammenhängt, wenn ich jedoch eine Tabelle, mit einer eingefärbten Zelle von der Größe 100x100px erzeugen möchte, wird sie in der Größe von 129x127px dargestellt.
Das Problem ist Browser-unabhängig...


Was verursacht dieses Mysterium und wie kann ich es beheben?

Ich hoffe, dass mir jemand helfen kann! :)

Grüße,
Florian
 
Zuletzt bearbeitet:
Hallo thecain, danke für deine schnelle Antwort!

Das wäre eine Möglichkeit, es wäre jedoch ein erheblicher Aufwand wenn ich jedes Grafik-Element skalieren müsste und wie oben erwähnt tritt es auch bei Tabellen usw. auf ...
 
Hallo.

Welche Zoomeinstellungen hast du denn an deinem Browser?

Ausserdem möchte ich dir noch ans Herz legen Tabellen nicht als Layouthilfen zu missbrauchen. Webseiten werden nicht mit Photoshop erstellt. Mit dieser Vorgehensweise wirst du immer Probleme haben.

Gruss
Elroy
 
Hallo Elroy, danke für die Antwort!

Natürlich habe ich 100% Zoom und ich habe es auch in mehreren Browsern getestet :D

Ich verwende auch keine Tabellen für das Layout sondern lediglich CSS und DIV-Elemente - wie gesagt, ich bin kein Laie, nur mein Problem kommt mir so vor :p
Naja also die meisten Websites entstehen per Photoshop und werden dann in einer HTML-Datei wieder zusammen gebastelt (es werden ja kostenpflichtige Templates nicht einfach so als PSD-Downloas zur Verfügung gestellt), aber darauf möchte ich jetzt nich näher eingehen.

Vielleicht kann mal jemand diesen Code in eine HTML-Datei einbinden und im Browser öffnen und mir dann sagen, ob es wirklich 100x100px sind?

HTML: 
<html>
<body>
  <table><tr><td bgcolor="#000000" width="100" height="100"></td></tr></table>
</body>
</html>

P.S.: ich habe es auch gerade mittels CSS probiert: ein 100x100px großes Feld ist nicht 100x100px groß ...
 
Zuletzt bearbeitet:
thecain schrieb:
In welchem Jahrtausend war das so?
Zum Vergrößern anklicken....
Wenn du damit meine Aussage mit Photoshop bezüglich Websites meinst: z.B. auf templatemonster.com werden alle websites als HTML und PSD angeboten und wie sollte man eine Website, die optisch ansprechend ist, sonst grafisch gestalten? ;)

Nun wieder zum eigentlichen Thema:
Ich habe es jetzt geschafft, dass das bild in Originalgröße dargestellt wird.
Und zwar mit Hilfe des folgenden CSS-Codes:

Code: 
img {
    max-width: 100%;
    height: auto;
}

Wieso benötige ich das und kann ich es vielleicht auf das gesamte Dokument anwenden?
(indem ich statt img was anderes verwende?)
 
Hallo MrMuprhy, vielen Dank für die Antwort!

Und wieso macht es das nicht automatisch?

Angenommen ich möchte ein Div-Element, welches 800x200px groß ist, wie bewerkstellige ich, dass es im Browser genau in dieser Größe angezeigt wird?
 
Hallo,

du gibt ihm eine Breite von 800px und eine Höhe von 200px. Und dann noch padding, border und margin berücksichtigen, also im Zweifel auf Null stellen.

Grundsätzlich ist diese Vorgehensweise mit festen Werten in Zeiten von Smartphones und Tablets veraltet.

Gruss

MrMurphy
 
Ja, natürlich, das ist mir schon klar!
Aber der Browser zeigt es eben NICHT in dieser Größe an.

Wie ist dann die "neue" Vorgehensweise?
 
Hallo

Aber der Browser zeigt es eben NICHT in dieser Größe an.
Zum Vergrößern anklicken....

Dann arbeitet der Browser nicht korrekt. Beim Firefox kann das zum Beispiel passieren wenn Addons installiert werden, die in die Ausgabe eingreifen.

Wie ist dann die "neue" Vorgehensweise?
Zum Vergrößern anklicken....

Ein flexibles Layout mit Responsive Design, das sich der jeweiligen Fenstergröße anpasst.

Gruss

MrMurphy
 
Hmm das bezweifle ich, da ich es mit verschiedenen Browsern und Betriebssystemen getestet habe ... aber vielleicht könntest du kurz für mich folgenden Quellcode ausprobieren und sagen ob es bei dir passt? :)


HTML: 
<html>
<head>
  <style>
   #test{
       width: 100px;
       height: 100px;
       background-color: #000000;
   }
  </style>
</head>
<body>
  <table><tr><td bgcolor="#000000" width="100px" height="100px"></td></tr></table>
  <div id="test"></div>
</body>
</html>


Das die Website für eine Mindestauflösung von 720p konzipiert ist, halte ich dies für dieses Projekt als unverhältnismäßigen Aufwand ...
 
Hallo,

Vielen Dank, hast du es ausgemessen?
Zum Vergrößern anklicken....

Wie soll man denn Pixel ausmessen?

Ich habe die Seite in verschiedenen aktuellen Browsern (IE, FF, Chrome und Opera) bei 100%-Zoom aufgerufen und die Größen ausgemessen (alle gleich) sowie in den jeweiligen Entwicklertools nachgeschaut, welche Größe angezeigt wird.

Außerdem habe ich 100 Container zu je 1px Größe nebeneinander und übereinander erstellt und die Länge mit den beiden Quadraten verglichen - passt auch.

Alles andere hätte mich auch gewundert.

Gruss

MrMurphy
 
Hallo MrMurphy, vielen Dank für deine Bemühungen.

Ich habe es gerade an einem anderen Laptop ausgetestet und dort wurde es dank der niedrigeren Auflösung kleiner und somit richtig dargestellt.

Das bedeutet, dass die gesamte Website bei einer hohen Auflösung (Full HD) ungewollt vergrößert wird... (wsl. macht dies der Browser)

Ich werde nun die ganze Website wohl einfach mit der originalen Auflösung, wie sie in Photoshop vorgegeben ist erstellen und die Vergrößerung in Kauf nehmen müssen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben