Dopasowanie rozmiaru obrazka bez względu na rozmiar urządzenia

Question

Witam, robię do strony mobilnej tło i mam lekki problem z poprawnym wyświetleniem. Załóżmy że obrazek ma 300x600 i chcę go wyświetlić cały bez żadnych przycięć, a także żeby nie zostawało puste białe miejsce. Jakich styli CSS powinienem użyć

Answer 1

Nie da się osiągnąć tego co napisałeś, bo brak przycięć + brak białych pól, wyklucza się.

Możesz użyć "background-size: cover; background-position: center;", ale nie wiem, czy to jest to co chcesz osiągnąć.

Answer 2

Obrazek wypełniający rodzica, nieprzycięty, z rozwalonym skalowaniem:

width: 100%; height: 100%;

Obrazek wypełniający rodzica, wyśrodkowany i przycięty, z poprawnym skalowaniem:

width: 100%; height: 100%; object-fit: cover;

 

Pamiętaj, że aby można było ustawić height procentowy, rodzic również musi mieć height zdefiniowany. W innym przypadku możesz zastosować zamiast 100% po prostu jednostki: vw oraz vh.