Centrowanie dużych obrazów w pionie w mniejszej div

Question

Mam problem, który doprowadza mnie do szaleństwa. Mam mały element div zawierający większy obraz (bez określonego wymiaru).

Przyjmuję ten większy obrazek i nadaję mu szerokość 100%, aby skalować w dół, aby zmieścić się w granicach pola, ale potrzebuję obrazu do pokazują się pionowo w środku div, a nie tylko z góry na dół.

Czy istnieje łatwa poprawka CSS? Kręciłem się, ale nie miałem szczęścia.

Currently: Intended: 
--------  -------- 
| div /w | |overflow| 
| image |  --------  
--------  | div w/ | 
|overflow| | image | 
| image |  -------- 
--------  |overflow| 
       -------- 

Answer 1

Nie wiedząc więcej o swoim problemie, istnieje wiele sposobów można to podejście.

Najprawdopodobniej po ustawieniu obrazu jako tła elementu div (zamiast umieszczania go w kodzie HTML) rozwiąże on problem;

div {background: url(image.png) center center no-repeat;} 

Inną metodą lubię jest użycie position:absolute aby ustawić obraz dokładnie tam, gdzie chcę.

Ponadto, jeśli zamierzasz użyć metody z vertical-align: middle, upewnij się, że zastosowałeś ją do obrazu, a nie do zawierającego go elementu div.

Answer 2

Chciałbym spróbować tej CSS:

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; } 
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); } 

Answer 3

Sugerowałbym przyklejenie obrazu do div, a następnie wyśrodkowanie elementu div. Poniżej znajduje się szczegółowy opis, jak to zrobić: here.