mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 13:56 Benutzername: Passwort: Auto-Login

Thema: Img in verschienden Browsern/Auflösungen vom 23.09.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Img in verschienden Browsern/Auflösungen
Seite: 1, 2  Weiter
Autor Nachricht
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 23.09.2010 13:00
Titel

Img in verschienden Browsern/Auflösungen

Antworten mit Zitat Zum Seitenanfang

Hallo,

wie muss ich ein img einfügen, in meinem Fall ein Logo, sodass es sich in verschienden Browsern bei geringerer Auflösung
zwar verkleinert, jedoch die proprotionen beibehalten werden...
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 23.09.2010 13:07
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du dem Bild mittels CSS eine relative Größe wie z.B. % gibst, nimm dieses diese in Bezug auf sein Elternelement an. Verkleinert sich nun das Elternelement, skaliert das Bild entsprechend.

Greetz
Karl
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 23.09.2010 13:12
Titel

Antworten mit Zitat Zum Seitenanfang

als Bsp

Code:
.img-holder {
  width:5em;
  height:5em;
}

.img-holder img {
  width:100%;
  height:100%;
}
  View user's profile Private Nachricht senden
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 23.09.2010 13:39
Titel

Antworten mit Zitat Zum Seitenanfang

also irgendwie hats nicht geklappt....hab mal was aussem internet zusammenkopiert, und dann halt mein
Hintergrund als Hintergrundbild und jetzt soll da halt noch wie gesagt das Logo rein, und später noch an einer Position ein
Flash trailer...

Das Logo hatte ich auch schon drin, aber wurde nicht, wie der gesamte Hintergrund bei anderer Auflösung skaliert.

Code:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

#content {
position: absolute;
color:#21bddf;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: auto;
}


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet" />
<title>Hintergrundbild einbinden</title>
</head>
<body>
<img id="hintergrund" src="background.jpg" border="0" alt="Hintergrundbild">
<div id="content">
<p> Hallo></p>
</div><!--Ende #content-->
</body>
</html>


Wo muss ich da jetzt ansetzen, irgendwie fehlt mir da jetzt so die Erfahrung?


Zuletzt bearbeitet von talex am Do 23.09.2010 13:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 23.09.2010 14:14
Titel

Antworten mit Zitat Zum Seitenanfang

Abhängig von der Viewportgröße skaliert wird ein Element natürlich nur mit width/height in % (ggf. nur eine Eigenschaft angeben, um Verzerrungen zu vermeiden). Im Falle von height brauchen alle Vorfahren ebenfalls eine height-Deklaration in % (bei anderen Einheiten oder komplett fehlender height-Deklaration geht die Skalierung verloren), bei width ist es egal.

Aber was Du da vorhast, klingt ziemlich eigenartig - Du willst auch Dein Logo kleinskalieren lassen? Damit man bei kleinem Viewport gar nix mehr erkennt?


Zuletzt bearbeitet von heiko_rs am Do 23.09.2010 14:16, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 23.09.2010 14:20
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Abhängig von der Viewportgröße skaliert wird ein Element natürlich nur mit width/height in % (ggf. nur eine Eigenschaft angeben, um Verzerrungen zu vermeiden). Im Falle von height brauchen alle Vorfahren ebenfalls eine height-Deklaration in % (bei anderen Einheiten oder komplett fehlender height-Deklaration geht die Skalierung verloren), bei width ist es egal.

Aber was Du da vorhast, klingt ziemlich eigenartig - Du willst auch Dein Logo kleinskalieren lassen? Damit man bei kleinem Viewport gar nix mehr erkennt?


ja aber wie soll es sonst sein....dann guckt z.B. einer mit nem Handy auf die Seite und sieht ein "fettes" Logo??

Muss doch dann kleiner skaliert werden...oder versteh ich grad was falsch?
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Do 23.09.2010 14:25
Titel

Antworten mit Zitat Zum Seitenanfang

Es gibt die Möglichkeit für unterschiedliche Medien unterschiedliche Stylesheets zu deklarieren

Ferner gibt es die mit CSS3 eingeführten die Media Queries. Hier ist die Browserunterstützung aber noch nicht vollständig vorhanden.

Greetz
Karl
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 23.09.2010 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

talex hat geschrieben:
dann guckt z.B. einer mit nem Handy auf die Seite und sieht ein "fettes" Logo??

Z.B. beim iPhone zoomt der Nutzer die Seite selber, darum musst Du Dich nicht kümmern. Hast Du denn schonmal per Handy gesurft?


Zuletzt bearbeitet von heiko_rs am Do 23.09.2010 14:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen auflösungen
Ico-Files und Auflösungen
Neue iOS Auflösungen für Appdesigns
Logodatei für mehrere Auflösungen?
Dreamweaver-layer-und auflösungen
ß wird in Browsern zu ss
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.