html{overflow-x: hidden!important;} a urządzenia mobilne ?

Question

Witam 

Napisałem stronę podzieloną na sekcję. Na jednej z sekcji widnieje obrazek, który skaluje się wraz z zmniejszaniem okna (oraz wraz z rozdzielczością ekranów). Jednak aby obrazek ten przy mniejszych rozdzielczościach nie wyglądał dziwnie nadałem mu właściwości w css

min-height: x px; oraz min-width: x px;

Jednak wtedy przy zbyt dużym pomniejszeniu okna pojawiał się poziomy suwak aby zobaczyć cały obraz wtedy dodałem do css 

html{overflow-x: hidden!important;}

aby ukryć wszystko co wyjeżdża poza prawą cześć ekranu. I wszystko gra i śmiga pięknie jednak jest jeden mały haczyk. html{overflow-x: hidden!important;} - nie działa na telefonie :/ 

Co zrobić z tym faktem ?

Answer 1

Wstawić obrazek jako tło albo https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Comments

hmm nie wiem czy robię coś źle jednak "object-fit: cover" i inne nie działa mi. Po przypisaniu tego kodu do zdjęcia (<img .../>) obrazek nadal "wystaje" poza szerokość telefonu.

---

Fajnie jakbyś to pokazał online ;)