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!

Hi!

Code :

1	overflow:hidden

http://de.selfhtml.org/css/eigenscha...g.htm#overflow

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!

Hi,

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

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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 */ }

Code :

1 2 3

<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.

Ich meine so:

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

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

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?

Hallo!

Code :

1 2 3

<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/B...rk-Bamberg.jpg


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

Geht das?

Danke!

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.

Ok, sorry...

Ich dachte das sei wieder ein anderes Problem...

War schon müde

Kann mir niemand helfen?


Danke!

Zitat von oldputz1990

Ich dachte das sei wieder ein anderes Problem...

Abgesehen von der schmäleren Box hat sich an der Problematik wohl kaum etwas geändert.

Zitat von oldputz1990

War schon müde

Schon zur Mittagszeit, um viertel vor eins?

Zitat von oldputz1990

Kann mir niemand helfen?

Ich hab dir zwei Möglichkeiten aufgezeigt, die CSS bietet, um das Bild bzw. einen Ausschnitt davon in der Box zu zentrieren.

Eine weitere, und damit die letzte Variante wäre die clip-Eigenschaft, um den Anzeigebereich der Grafik zu begrenzen. Aber auch hier gilt, dass die Dimensionen der Grafik vorher bekannt sein müssten, um den Bildausschnitt bestimmen zu können.

Da die Bilder aber von Usern hochgeladen werden, sind ihre Dimensionen auch nicht vorher bekannt, und somit lässt sich da mit CSS nichts machen.

Ich bin mir jetzt auch nicht sicher, ob da was mit JS oder PHP möglich wäre, denn woher willst du denn überhaupt wissen bzw. beim Upload ermitteln, wo genau sich nun jeweils der "gewünschte" Bildausschnitt innerhalb der Grafik befindet?

Mein Fazit daher: "Mission impossible"!