Forum PHP.pl

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:

[HTML] pobierz, plaintext 
.plain.post-image.data-image{   
	max-height: 180px !important;
	overflow-x: hidden;
    overflow-y: hidden;
}
[HTML] pobierz, plaintext 

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

Jak to zrobić, żeby brał środek zdjęcia w miniaturze?

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.

Możesz zrobić np tak:

[HTML] pobierz, plaintext 
<img src="obrazek.jpg" width="100px" height="100px"/>
[HTML] pobierz, plaintext 

lub

[HTML] pobierz, plaintext 
<img src="obrazek.jpg" id="zdjecie">
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
#zdjecie{
zoom:0.1;
}
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
#zdjecie{
background:url('obrazek.jpg') center center
}
[HTML] pobierz, plaintext 

lub znając rozmiary grafiki, obliczyć jej przesunięcie

Ten post edytował kujol 30.03.2014, 15:51:14

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...

[HTML] pobierz, plaintext 
 
position-relative; top:200px;
Lub
position-relative; top:50%;
[HTML] pobierz, plaintext 

Niestety żadna z podanych porad nie działa prawidłowo

Ustaw jako tło i zrób jak kolega Kujol pisał:

[CSS] pobierz, plaintext 
#zdjecie{
background:url('obrazek.jpg') center center
}
[CSS] pobierz, plaintext 

Innej opcji bez tony javascriptu nie ma

Nie mogę tego zrobić jako background.
Zatem nie da się... ok

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.