Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] zdjęcie w pozycji środkowej
Forum PHP.pl > Forum > Przedszkole
kielich
Witam mam problem ponieważ nie wiem jak dobrać sie i ustawić zdjęcie w taki sposób
pl.fotolia.com/search?k=fryzjer&filters[content_type%3Aall]=1&submit.x=0&submit.y=0

mianowicie :
- box po zdjęciem zawsze tego samego rozmiary, a zdjęcie nie ważne czy pionowe czy poziome zawsze jest do środka - wszystkiego zdjęcia równe.

Dziękuje za pomoc
MateuszS
To się nazywa kadrowanie. Można to zrobić zaraz po wgraniu na serwer obrazka i zapisać jako nowy, wykadrowany (zżera ofc pamięć na dysku serwera) lub kadrować dynamicznie podczas wyświetlania (zżera czas, mogą się dłużej obrazki ładować). Kwestia matematyki.
klima06
@up
Warto dodać, że kadrowanie dynamiczne bardziej obciąża serwer, niż gdyby obrazki były zapisane na serwerze.

@topic
W podanym przez Ciebie przykładzie wydaje mi się, że to wcale nie jest kadrowanie, bo zauważ że obrazki nie mają "kwadratowych" wymiarów. Miniaturki o wymiarach nie większych niż 110px na 110px są zapisane na dysku, a jeśli chodzi o wyśrodkowanie obrazka to najprawdopodobniej jest to robota PHP, który generuje kod HTML.
Source code podanej strony:
  1. <img src="http://t2.ftcdn.net/jpg/00/56/67/41/110_F_56674101_sQOvEMSOEGwlyEJrlgiVc4lTS0r5eV7N.jpg" alt="Surprised Woman with open Mouth. Pin up Girl" title="" width="110" height="86" style="padding-top: 12px;" class="with-ezpz-tooltip">

Załóżmy, że ten box ma wymiary 120px na 120px, padding: 5px. Wtedy wszystkie obrazki w orientacji poziomej zmniejsza do szerokości 110px, zaś obrazki w orientacji pionowej do wysokości 110px. Potem wystarczy, że wkleisz powyższy kod HTML, z elementami PHP, przykładowo dla obrazka w orientacji poziomej:
  1. <img src="<?=$image_path; ?>" alt="<?=$image_description; ?>" width="<?=$image_width; ?>" height="<?=$image_height; ?>" style="padding-top: <?=((110-$image_height)/2); ?>px;">


Jeśli nie wiesz jak rozpoznać czy obrazek jest w orientacji poziomej czy pionowej lub jak pobrać wysokość i szerokość obrazka to pisz wink.gif
vermis
Nie wiem czy masz problem ze skalowaniem czy tylko z umieszczeniem w środku.

Z tego co widzę to obraz jest skalowany do wymiarów boksu, czyli 160x160px. Czyli dłuższy bok może mieć co najwyżej 160px - to możesz w gd zrobić.
Znając rozmiar obrazu i boksu wszystkim obrazkom nadają odpowiedni padding-top, który ustawia obraz w środku.
Efekt wyśrodkowania można też uzystkać za pomocą CSS - display: table-cell oraz vertical-align: middle.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.