FIxen Bereich erstellen

[oldputz1990]

Hallo!

Ich würde (per css) gerne einen Bereich erstellen, der 250px * 250px Groß ist.

In diesen Bereich kommt ein Zufallsbild rein.

Wenn das Zufallsbildgrößer als 250px * 250px ist, dass soll das Design noch verrutschen.
Das restliche Bild soll man dann halt einfach nicht mehr sehen.


Ich hoffe ihr versteht was ich meine!

(Alles was Größer ist als das Feld soll einfach unsichtbar werden (verschwinden))

DANKE!

 

[Maik]

Hi!

overflow:hidden

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

 

[oldputz1990]

Ahh!
Danke!

Geht das auch, dass das Ganze von der Mitte anfängt?

wenn z.B. in der Mitte des Bilder ein Gesicht ist, und im Hintergrund Blumen ;-) dann soll nur das Gesicht sichtbar sein.

Geht das?

Danke!

 

[Maik]

Hi,

grundsätzlich wäre das schon möglich, sofern die Grafikdimensionen bekannt sind (in diesem Beispiel 400*400px):

div#box {
width: 250px;
height: 250px;
overflow: hidden;
position: relative;
border: 1px solid black;
}

img#random_1 {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 400px;
margin-top: -200px; /* negative Hälfte von height:400px */
}

<div id="box">
  <img src="..." id="random_1">
</div>

Ansonsten bliebe noch die Möglichkeit, die Bilder als Hintergrundbild einzusetzen, und diese mit background-position:center in der Mitte zu positionieren.

 

[oldputz1990]

Ich meine so:

http://www.imgbox.de/users/public/images/j21004e44.png

 

[Maik]

Ich hab schon verstanden, wie du das meinst, und dir die jeweiligen Möglichkeiten für ein Grafikelement img oder Hintergrundbild genannt.

 

[oldputz1990]

Hallo!

Ich habe das jetzt mal versucht!

Danke erstmal!

Das Problem ist dass: Das Bild können die User selber hochladen.
So weiß ich nicht, wie groß das bild ist. Nun kann ich die Größe des Bildes auch nicht in der CSS Datei umstellen.

Wie kann ich das sonst noch lösen?

 

[oldputz1990]

Bild zentrieren

Hallo!

<div style="width: 150px; overflow: hidden; border: 1px solid; float: left;">
     <img src="http://www.tiscali.de/sport/images/Bauermann-Dirk-Bamberg.jpg">
</div>

Das sieht dann so aus:

http://www.250kb.de/u/070705/j/3e4e0031.jpg

AUssehen sollte es aber so:
http://www.250kb.de/u/070705/j/579dca60.jpg


Das ist das Original Bild:
http://www.tiscali.de/sport/images/Bauermann-Dirk-Bamberg.jpg


ich möchte das Bild also im "div Bereich" zentrieren.

Geht das?

Danke!

 

[Maik]

Hi,

darf man erfahren, weshalb du zu der Frage ein neues Thema startest, wenn wir sie schon in deinem letzten Thread erörtert haben?

Aus diesem Grund pflanze ich dein Posting in diesem Thema ein und erinnere dich an die Netiquette #12.

 

[oldputz1990]

Ok, sorry...

Ich dachte das sei wieder ein anderes Problem...

War schon müde

Kann mir niemand helfen?


Danke!