Wypełnienie całego obszaru a zmieszczenie w kwadracie

Wzorem wiodących portali zdjęcie na liście ogłoszeń w skrypcie portalu ogłoszeniowego skaluje się tak by wypełnić cały obszar. Poniżej opiszę jak to zostało zrobi i jak ewentualnie zrobić by zdjęcie jednak się minimalizowało.

Aby obrazek wypełniał cały obszar(div) trzeba ustawić go na tło i pokazać przeglądarce jak ma wypełnić tło:
background-image: url(http://adresobrazka.jpg);
background-size: cover;

Dzięki temu cały obszar będzie wypełniony. 

Mimo to czasem są zdjęcia bardzo wąskie i jeśli jednak chcemy aby zdjęcie minimalizowało się do wielkości elementu wtedy dajemy jak poniżej:
background-image: url(http://adresobrazka.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;

Ta opcja pozwoli by zdjęcia mieściły się w obszarze, poniżej przykłady z portalu ogłoszeń:


Drugi sposób: