Pionowe centrowanie obrazów w responsywnym projekcie zachowuje się różnie w WebKit - jquery, wtyczki jquery, responsive-design, vertical-wyrównanie

Obecnie tworzę responsywną stronę internetową, która wykorzystuje genialny skrypt, który pionowo wyśrodkowuje obrazy w rodzicu przy maksymalnej wysokości i przepełnieniu ustawionym na ukryty:

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

Skrypt działa doskonale, gdy jest tylko jedenwystąpienie kontenera na stronie, jednak po znalezieniu jednego lub większej liczby instancji kontenera, centrowanie pionowe zostaje zrujnowane. Wygląda na to, że skrypt stosuje ten sam margines do wszystkich obrazów na stronie, co w moim przypadku nie jest idealne biorąc pod uwagę:

1. Różne instancje kontenera mają różne maksymalne wysokości.
2. Obrazy mają różną wysokość i dlatego powinny mieć unikalny margines.

Aby przezwyciężyć problemy, przed którymi stanąłemnieznacznie zmodyfikował skrypt, używając funkcji jQuery .each () do iterowania obiektów i uruchamiania funkcji. Wyniki można zobaczyć pod następującym adresem URL:

http://www.lewismalpas.co.uk/rwd

To zdaje się działać zgodnie z zamierzeniami i każdy obraz mawyjątkowy margines, który jest świetny, ale mam doświadczenie w kilku problemach, które nie mogę rozwiązać i byłbym wdzięczny za twoją pomoc. po pierwsze Otrzymuję błąd JS w konsoli, którego nie mogę naprawić:

ReferenceError: centerImage is not defined

Otrzymuję również nieoczekiwane wynikiSafari / Chrome, ponieważ obrazy nie są wyśrodkowane w pionie podczas wczytywania strony lub odświeżania, jednak naciśnięcie klawisza powrotu w polu adresu URL wydaje się wyśrodkowywać obrazy, ale nie jest to idealne rozwiązanie.

Każda pomoc z tymi problemami / inconcistencies byłaby naprawdę doceniana,

Dzięki,

Chwytak.

Odpowiedzi:

0 dla odpowiedzi № 1

--------- Przepraszam, odrzucam moją odpowiedź, nie przeczytałem pełnego pytania --------------

Tak, masz rację, tylko rzuciłem okiem na kod.

Możesz zmienić funkcję centerImage () na coś takiego:

 function centerImage() {
$container.each(function() { //iterate through every single container
$this = $(this); // wrap the current container in jQuery so you can call some jQuery methods.
$img = $this.find("img"); // finding the image inside current container.
imageHeight = $img.height();
wrapperHeight = $this.height();
overlap = (wrapperHeight - innerHeight) / 2;
$img.css("margin-top", overlap);
});
}

Wszystko inne jest w porządku.

Mam nadzieję, że to pomoże :)

---