Probleme mit Bildern ausrichten

[Lynn]

Hallo Zusammen

Ich hab das Problem, das ich mehrere Bilder habe ide entweder hochkant(110x165) oder quer(230x153) sein können.
Es so das die reihenfolge unterschiedlich resp. varieren kann.

Nun mein PRoblem ich möchte diese Bilder alle am gleichen Ort ausgehend vom linken Rand, als das die jeweiligen Bild-Mittelpunkte aufeinander liegen.

Ich habs mit margin-left probiert, aber dann reiht er sie aneinander...wäre euch sehr dankbar wenn jemand helfen könnte.

grüessli Lynn

[ThatMSG]

hast du es mal mit position:absoulte; bzw relative probiert?

[my-webdesigner.com]

Eine Möglichkeit ist es, diesen Bildern die CSS-Eigenschaft "float: left" zu geben.

Code: Alles auswählen

<img src="bild.jpg" alt="" style="float: left;">

Dann rutschen diese, je nach Proportion, in eine Zeile.
In Verbindung mit "vertical-align" kann man dessen vertikale Ausrichtung kontrollieren.

[Ingo]

Hi.

(<img>-Elemente sind inline und bleiben auch ohne float in der Zeile.) Geht es hier darum, dass Bilder
an 1 Platz nacheinander gezeigt und dabei vertikal und horizontal zentriert werden oder dass sie
vertikal zentriert nebeneinander dargestellt werden?

Gruß, Ingo

[Lynn]

Die Bilder sollen wie gesagt an der gleichen Stelle, aufeinander gefächert angezeigt werden...klar?

[Ingo]

Nich ganz. Folgendes stellt ein Bild (hoch oder quer) in einer Box zentriert dar (Mittelpunkte am selben Ort):

Code: Alles auswählen

  .pix {
    width:230px; height:165px;  /* je das Maximum */

    display:table-cell;        /* ab IE 8; IE nicht im Quirksmode */
    text-align:center;         /* horizontal zentrieren */
    vertical-align:middle;     /* vertikal zentrieren */

    border:1px solid grey;
  }

<div class="pix">
  <img src="abcH.png" alt="H" />
</div>


[Lynn]

Leider funktioniert das auch nicht...ich poste hier mal ein code-teil...bringt vielleicht ein wenig licht ins dunkeln:

for(var i = 0; i < items_count; ++i){
var marginleft = 0;

var item_source = data[i];
var cnt = 0;
$('<img />').load(function(){
var $image = $(this);
++cnt;

var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;

var containerwidth = 230;
var containerheight = 165;

if(oldWidth == 0){
marginleft = imgwidth;
}else if(imgwidth == 230){
marginleft = 230;
}else if(imgidth == 110){
marginleft = 170;
}
$image.css({
'outline' : 1+'px solid white',
'border-color' : '#FFFFFF',
'width' :theImage.width,
'height' :theImage.height,
'float' : 'left',
'margin-left' :-marginleft+'px'
});

$ps_container.append($image);
var r = Math.floor(Math.random()*41)-20;
if(cnt < items_count){
$image.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
});
}
if(cnt == items_count){
$loading.remove();
$ps_container.show();
}
}).attr('src',item_source);
}

[Lynn]

aso meine eigentliche idee ist, das album-cover soll wie bei photostack jquery aussehen, also die bilder die im album enthalten sind so gefächert, aber es soll bei einem click nicht das nächste erscheinen sondern eine neue seite aufgehen...

Das problem ist, das die zahl der alben varieren kann und die zahl der bilder in den alben kann ebenfalls varieren. Jedoch sind einfach nur hoch oder querformat aber immer lgeiche grösse vorhanden...

eigentlich hab ichs fast, nur eben kann ich die querformate übereinander und die hoch übereinander, aber zwischen den mittelpunkten dieser beiden stapel ist ein abstand...und der soll nicht sein.

[Ingo]

Zwischendurch: Da scheint ein typo zu sein:

if(oldWidth == 0){
marginleft = imgwidth;
}else if(imgwidth == 230){
marginleft = 230;
}else if(imgwidth == 110){
marginleft = 170;
}

[Lynn]

das ist leider nur beim kopieren passiert...

[Lynn]

also wen ich mir den quelltext anzeigen lasse der seite siehts so aus:
<div id="ps_container1" class="ps_container1" style="margin-top: 250px; margin-left: 350px;">
<img src="albums/album1/IMG_0062.jpg" style="outline: 1px solid white; border-color: rgb(255, 255, 255); width: 230px; height: 153px; margin-left: -230px; -moz-transform: rotate(0deg);">
<img src="albums/album1/IMG_1080.jpg" style="outline: 1px solid white; border-color: rgb(255, 255, 255); width: 110px; height: 165px; margin-left: -110px; -moz-transform: rotate(10deg);">
<img src="albums/album1/IMG_3168.jpg" style="outline: 1px solid white; border-color: rgb(255, 255, 255); width: 230px; height: 153px; margin-left: -230px; -moz-transform: rotate(-17deg);">
<img src="albums/album1/IMG_3036.jpg" style="outline: 1px solid white; border-color: rgb(255, 255, 255); width: 230px; height: 153px; margin-left: -230px; -moz-transform: rotate(7deg);">
<img src="albums/album1/IMG_4536.jpg" style="outline: 1px solid white; border-color: rgb(255, 255, 255); width: 110px; height: 165px; margin-left: -110px;">
</div>

und ich weiss das bei den zweien mit margin-left der wer 170px sein müssten und dann würde es stimmen, aber leider kann ich den wert da irgendwie nicht beeinflussen...

[Ingo]

Dann wäre interessant, im Firebug (Script-Tab) nen Breakpoint zu Beginn des marignleft-Abschnitts
zu setzen und zu sehen, welchen Wert imgwidth jeweils hat (Vorgabe) und welchen Wert marginleft
am Ende des Abschnitts hat. An sich sollte je bei imgwidth == 110 marginleft auf 170 gesetzt werden.
Bei imgwidth==230 klappt das ja schließlich auch. Iwo da muss ein Fehler liegen.

[Lynn]

super idee danke, also leider kommt er gar nie zu den if abfragen...

[Ingo]

Hm, dann vielleicht als Notbehelf mit alert(xyz) arbeiten: einfach dort hin setzen, wo
der programmfluss an sich vorbeikommen sollte. - Für den Firebug geht das auch mit

Code: Alles auswählen

console.log('hallo, welt')

Das Ergebnis taucht dann halt im Konsolen-Tab auf.

[Lynn]

klar daran hab ich nicht gedacht, jetzt weiss ich auch das oldwidth immer 0 ist...hmmm