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 |
|
|
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...
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Do 23.09.2010 13:07
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 23.09.2010 13:12
Titel
|
|
|
als Bsp
Code: | .img-holder {
width:5em;
height:5em;
}
.img-holder img {
width:100%;
height:100%;
} |
|
|
|
|
|
talex
Threadersteller
Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 23.09.2010 13:39
Titel
|
|
|
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
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 23.09.2010 14:14
Titel
|
|
|
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
|
|
|
|
|
talex
Threadersteller
Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 23.09.2010 14:20
Titel
|
|
|
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?
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 23.09.2010 14:27
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ä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
|
|