Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Jak zrobić prawidłową miniaturę zdjęcia?
Forum PHP.pl > Forum > Przedszkole
cent4
Mam jakąś grafikę o rozmiarze np. 600X800 i grafika wygląda normalnie ale chcę zrobić za pomocą css'a mniejszy rozmiar tej grafiki ale koniecznie, żeby był wycentrowany w pionie (tzn. żeby jego "miniatura" nie była brana z górnego punktu tylko żeby pod uwagę był brany środek zdjęcia...)
Wygląda to w tej chwili tak:
  1. .plain.post-image.data-image{
  2. max-height: 180px !important;
  3. overflow-x: hidden;
  4. overflow-y: hidden;
  5. }

i zdjęcie-miniatura zmniejsza się prawidłowo ale niestety nie widać środka, tylko jego górną część sciana.gif

Jak to zrobić, żeby brał środek zdjęcia w miniaturze?
timon27
To nie jest miniatura.
Miniatura to małe zdjęcie, a nie duże które sobie zmniejszysz w css.
Zrób miniaturę w php. Potem zastanowisz się nad css.
kujol
Możesz zrobić np tak:

  1. <img src="obrazek.jpg" width="100px" height="100px"/>


lub

  1. <img src="obrazek.jpg" id="zdjecie">


css:
  1. #zdjecie{
  2. zoom:0.1;
  3. }


Wycentrować możesz w taki sposób, ale to tylko dotyczy tła:

  1. #zdjecie{
  2. background:url('obrazek.jpg') center center
  3. }


lub znając rozmiary grafiki, obliczyć jej przesunięcie
cent4
A jak zrobic takie przesuniecie? I czy da sie zrobic przesuniecie o np 50% wysokosci? Jesli chodzi o miniature - faktycznie źle to nazwałem - chodzi o zmniejszenie całości zdjęcia ale tak żeby jego wysokość maksymalna była jak w przykładzie i żeby w tej "miniaturze" było wycentrowane w pionie czyli jak np. Zdjęcie ma wysokości 800px to np po zmniejszeniu ma sie wyświetlać np. 200px - czyli przesunięte od góry o 200px, bo zdjecie ma 200px i kolejne 200px - niewidzialnego spodu...
kujol
  1.  
  2. position-relative; top:200px;
  3. Lub
  4. position-relative; top:50%;


cent4
Niestety żadna z podanych porad nie działa prawidłowo worriedsmiley.gif
Daimos
Ustaw jako tło i zrób jak kolega Kujol pisał:
  1. #zdjecie{
  2. background:url('obrazek.jpg') center center
  3. }

Innej opcji bez tony javascriptu nie ma
cent4
Nie mogę tego zrobić jako background.
Zatem nie da się... ok
b4rt3kk
Przecież zmniejszenie img za pomocą css nie powoduje jego ucięcia, a jedynie zmianę wielkości, co tu chcesz centrować? To jest ten sam img, tylko nieco mniejszy? Pokaż kod HTML, bo to o czym piszesz nie ma sensu.
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.