CSS Bilder Verzerren / verziehen ;(

[jonny8]

Hi all,
ich habe meine Bilder und Texte in folgendem Container:

#container
{
    position: absolute;
    top: 190px;
    right: 85px;
    border: 0px solid #dad6db;
    width: 385px;
    height: 385px;
    background: #660021;

}

unter 1280 x 1024 ist alles supi -.-
doch wenn ich den browser resize wird der container kleiner
bzw. bei einer niedrigeren auflösung verzerren die Bilder
im Anhang ist mal mehr code

 

[S.o.T.]

Du hast offenbar ein grundlegendes Verständnisproblem: Prozentuale Werte bei Breiten und Höhen bewirken, dass sich das Element an die Größe seines Elternelements anpasst. Wenn du das Fenster kleiner machst, dann ist es die naturgemäße Konsequenz, dass dein Element schrumpft.

 

[jonny8]

sry... falscher code
... hab soviel rumgespielt das ich gar ned darauf geachtet habe...
nun also mein problem war das auch als ich px eingegeben habe die Bilder verzerrten

 

[DUNnet]

warum ist die position absolute?
mach mal fixed!

 

[Mestraphos]

spielt halt 1.6

made my day!

 

[jonny8]

warum ist die position absolute?
mach mal fixed!

hab ich auch schon probiert das funktioniert ganz gut beim resizen doch bei 1280x720 bringts auch nix

 

[S.o.T.]

Okay, dann erachte meinen vorangegangen Post als gegenstandslos! Mit dem Code, den du zunächst gepostet hast, konnte ich nicht anders, als obige These aufzustellen.

Der Container kann mit diesen Angaben alleine nicht kleiner werden beim Resize. Da muss noch ein bisschen anderer Code mit im Spiel sein. Am besten alles einmal iwo hochladen und dann können mea ma schaun!

 

[K0nsumHure]

made my day!

dasselbe dacht ich auch...

 

[jonny8]

habs nochmal im ersten post angehängt

 

[S.o.T.]

Also dass dein Bild verzerrt ist logisch, weil du ihm prozentuale Breiten- und Höhenwerte zuweist. Der Container schrumpft überhaupt nicht.

Aber bevor wir hier weiter über dein "Problem" sprechen, möchte ich dich darauf hinweisen, dass dein Quelltext (sowohl HTML als auch CSS) große Macken hat. Ich gehe davon aus, dass du dich noch nicht allzu lange mit der Materie befasst, deswegen möchte ich dir folgende Artikel ans Herz legen:

• HTML: Die 3 Grundlegen
• Einführung in Wartbarkeit

Frohes Schaffen!

 

[jonny8]

-.-
<img style="vertical-align:middle width:385px; height:385px;" src="images/karte.jpg"/>
auch dann verzieht es das Bild
es ist auf jedenfall kein quadrat

(dies ist ohne die 100% in img der css datei)

 

[S.o.T.]

Da fehlt ein Semikolon.

 

[jonny8]

getestet ;P das reissts ned raus ;P

 

[S.o.T.]

Also, noch einmal zusammgefasst:

Wenn du einem Element eine feste Breite und Höhe gibst, dann sind Höhe und Breite des Elements absolut, völlig und ganz (einfach in jeder Hinsicht ^^) unabhängig von der Höhe und Breite des Elternelements. Falls du trotz der px-Werte noch ein verzerrtes Bild hast, dann... Tja, dann bin ich am Ende mit meinem Latein, weil das einfach keinen Sinn ergibt.

Bist du dir sicher, dass du nirgends deine Werte überschreibst?

 

[jonny8]

nun es steht praktisch fast nix mehr mit % drin -.-

body
{
    padding: 0;
    margin: 0;
    background: #573f27;
    color: #FFF;
    font-family: Arial Rounded MT Bold, arial, helvetica, sans-serif;
    font-size:                12px;
    font-weight:            normal;
    line-height: 150%;

}

img
{
border:none;
}
h1
{
color:#573f27;
font-size:35pt;
font-family:arial, helvetica, sans-serif;
letter-spacing:1px;
font-weight:normal;
}

h2
{
    font-size:20pt;
    color: #e84f13;
}

#img
{
    width: 100%;
    height:100%;
    position: inherit;

}


a
{
    text-decoration: none;
    color: #fff0b9;
}

a:hover
{
    text-decoration: none;
    color: #e84f13;
}


#container
{
    position: fixed;
    top: 190px;
    right: 85px;
    border: 0px solid #dad6db;
    width: 385px;
    height: 385px;
    background: #660021;

}

#containerevent
{
    position: absolute;
    top: 190px;
    right: 85px;
    border: 0px solid #dad6db;
    width: 385px;
    height: 385px;
    background: #522009;
    -moz-border-radius:15px;
    -khtml-border-radius:5px;
    color: #fff0b9;
    font-size:15px;
    font-family: Arial Rounded MT Bold, arial, helvetica, sans-serif;
}

#containermid
{
    position: absolute;
    top: 190px;
    right: 470px;
    border: 0px solid #dad6db;
    width: 385px;
    height: 385px;

}
#containermidd
{
    position: absolute;
    top: 190px;
    right: 85px;
    border: 0px solid #dad6db;
    width: 385px;
    height: 385px;
    background: #522009;
    -moz-border-radius:15px;
    -khtml-border-radius:5px;
    color: #fff0b9;
    font-size:15px;
    font-family: Arial Rounded MT Bold, arial, helvetica, sans-serif;
    
    }

#header
{
    position: absolute;
    top: 0%;
    right: 0%;
    height: 14pt;
    width: 549px;
    background: #522009;
    -moz-border-radius:15px;
    -khtml-border-radius:5px;

}


#nav ul
{
    padding: 0;
    margin: 0;
    float: right;
    font-size:16px;
    font-weight:normal;
    font-family: Arial Rounded MT Bold, arial, helvetica, sans-serif;

}

#nav ul li
{
    display: inline;
}

sry für den langen code aber... ICH WILLS WISSEN -.-

die id=img ist nur für den hintergrund

 

[S.o.T.]

Und wenn du dem Hintergrund-#img absolute Werte gibst, wird das Bild immer noch verzerrt?

 

[jonny8]

... ich probiers mal aufm laptop

Ergänzung (6. Oktober 2010)

ok hat länger gedauert bis ich begriffen hab das nich nur die auflösung sondern auch die form der bildschirms zum testen eine rolle spielen (raton etc LOL ;P

schönen abend noch
problem hat sich hoffentlich aufgelöst ;P
lieber keine % te ! ;P