[CSS]Jak zrobić prawidłową miniaturę zdjęcia? Opcje

[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:

[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ęść (IMG:style_emoticons/default/sciana.gif)

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

[kujol]

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