verschiedene Bilder gleich groß machen

[YelloW22]

hallo.

ich habe auf meiner Seite eine Bildergalerie mit Previews. Wenn man draufklickt, kommt man zur Flickr-Seite wo das Bild liegt.

jedes bild liegt in einem DIV von 120x90px mit width 100%.
Wenn jetzt aber ein Bild nur 86x29px groß ist, hat es ja ein anderes Format.
Folge: Das Bild ist nicht so groß wie mein DIV, das sieht dann doof aus...


Viele Bilder haben unterschiedliches Format.
Sprich manche sind zB 86x229px, manche 500x354px und andere sind wieder 86x29px.
Möchte jetzt also, dass jedes bild den DIV von 120x90px komplett füllen soll.
Wenn es zu groß ist, einfach abschneiden, wenn es zu klein ist, einfach hochrechnen.


wie mach ich das ?

 

[Frezl]

Hey Yellow,

dafür musst wohl etwas programmieren müssen, am besten serverseitig mit PHP oder Perl. Evtl. kannst dir auch ne clientseitige Lösung mit JavaScript überlegen. Warums nicht nur mit CSS geht:
Du willst die Bedingung "kleinere Bilder größer skalieren" und "von größeren Bildern nur Ausschnitt zeigen" miteinander verknüpfen. Das wäre ne logische Operation und sowas kann CSS nicht. Entweder das eine, oder das andere kannst du mit CSS allerdings lösen.

Wie man Bilder mit den genannten Programmiersprachen skalieren kann, kannst du hier in vielen Beispielen nachlesen.

Viele Grüße,
Frezl

 

[Paspirgilis]

In CSS ist das nur mit CSS 3 möglich befürchte ich.
Die größe des Hintergrund bildes kannst du so manipulieren mit CSS:
http://www.css3.info/preview/background-size/

Aber vlt. langt es ja wenn du das Bild als background image einbindest,
gib einem Div folgendes:

 background-position: center;
height: 90px;
width: 120px;
background: transparent url('meinbild.jpg') center no-repeat;

Oder ein anderer ansatz wäre es mit JavaScript, einem IMG-Tag und einem overflow-hidden-div zu machen.

MfG
Mark Paspirgilis

 

[YelloW22]

okay.

ich habe mein Problem glaube ich ein bisschen blöd beschrieben ...

Fakt ist:
mein DIV ist 120x90px = 4:3
Wenn mein bild jetzt zB 400x300px ist, wird es richtig dargestellt.
Wenn das bild jetzt aber 400x100px ist, wird es zwar auch richtig dargestellt, jedoch halt dann so verkleinert, dass es trotzdem ins 4:3 Verhältnis passt
--> Folge: unter bildern die ein Format haben wie zB ein längliches Banner, erscheint unterhalb ein Schwarzer kasten, der den Rest des DIVS ausfüllt.

EDIT. screenshot folgt gleich

 

[Paspirgilis]

gute frage.. eine Browserkompatible Lösung bzw. ohne JavaScript wirst du nicht finden.
hilft dir vlt. min-height bzw min-width weiter?

Und dann mit JavaScript positionieren und die Div ein overflow hidden verpassen?
ich glaub das müsste dann den effekt erzielen den du willst..
Allerdings kann cih einfahc nicht entnehemn welchen Effekt du erzielen willst, da du immer nur sagst was du hast und welche probleme auftreten, nicht aber was du erreichen möchtest oder ich versteh dich einfach nicht xD

MfG
Mark Paspirgilis

EDIT. freut sich auf den Screenshot

 

[YelloW22]

okay ... hier ein kleiner Screenshot wie es zur zeit ist:
http://www.imagebanana.com/view/tj986fdb/galeriebsp.jpg

und Der Code:

CSS:

#bildDiv {
position:absolute;
width:120px;
height:90px;
}

PHP:

<div id='bildDiv'><a href=XXXXX target='_blank'>
<img width='100%' border='0' alt='' " src="XXX">
</a></div>

--> aber alle Bilder sollen in der gleichen Größe stehen ?!


.

 

[Paspirgilis]

WTF? seh ich das richtig das du dann mehrere Divs mit der selben ID ("eindeutigen" bezeichnung) hast?
wenn ja... ich mach daraus ma ne klasse.

CSS:

.bildDiv {
position:absolute;
width:120px;
height:90px;
overflow:hidden;
}
.bildDiv a img {
min-height: 90px;
min-width: 120px;
position: absolute;
top: 0;
left: 0;
}

JS (jQuery):

$('.bildDiv img').css({
top: ($(this).height() -120)/2,
left: ($(this).width() -90)/2
});

HTML:

<div class='bildDiv'><a href=XXXXX target='_blank'>
<img border='0' alt='' " src="XXX">
</a></div>

Den JS-Code in normalen JavaScript code zu schreiben dauert zu lange, sorry.
Bin auf arbeit xD

MfG
Mark Paspirgilis

 

[YelloW22]

nein das war ja nur ein kleiner Ausschnitt.

Jedes bild (1-8) hat sein eigenes Div (1-8)

Den JS-Code in normalen JavaScript code zu schreiben dauert zu lange, sorry.

--> Was meinst du damit? welchen code?
wie bind ich dieses JQuery ding in meine Seite ein? einfach so wies is in den head schreiben? und viel wichtiger was bewirkt das?

 

[Paspirgilis]

oh sorry, dann hier ne kleine einleitung in "wie binde ich ein jQuery Scritp ein"
zu erst benötigst du die, meiner meinung nach, mächtigste javascript bibliothek: Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

(kurz vor dem </body> tag rein schreiben.)
dann kannst du JavaScript viel besser benutzen, wie ich zum beispiel ein script in 4 zeilen geschrieben habe, was in normalem js bestimmt 10-20 mal so viel ist
hinter der einbindung der jQuery bibliothek packst du nun das script rein:

<script type="text/JavaScript>
$(function(){
$('.bildDiv img').css({
top: ($(this).height() -120)/2,
left: ($(this).width() -90)/2
});
});</script>

Mein Script müsste bewirken, dass die Bilder horizontal und vertical ausgerichtet werden.
habs noch nicht getestet..

MfG
Mark Paspirgilis

 

[YelloW22]

okay danke schonmal

versteh jetzt nur das mit der CSS noch nicht ...
warum beginnt der name jetzt mit einem Punkt ?
wofür das ".bildDiv a img { }" ?

weiteres Problem:

Ich habe ja momentan 8 Divs für 8 Bilder

sprich bildDiv1 { }, bildDiv2 { }, usw .. in diesen Divs steckt ja auch die Positionierung der Bilder drin.
wie kann ich das nun handlen dass deine Lösung da funktioniert ?

Ausschnitt aus der CSS:

#bild1Div1 {
	position:absolute;
	width:120px;
	height:90px;
	z-index:2;
	left: 255px;
	top: 131px;
	border: none;
	cursor:pointer;
	overflow:hidden;
}

#bildDiv2 {
	position:absolute;
	width:120px;
	height:90px;
	z-index:2;
	left: 378px;
	top: 131px;
	cursor:pointer;
	overflow:hidden;
}