Zmniejszanie szerokości <img>

Question

Witam. Mam pewien problem. Mam <img> który ma wymiary 2000x800. Na deskopie wyglada naprawde ładnie, ale problem robi się na mobilce. Jest jakiś sposób, aby <img> był cały czas na statycznej wysokości ( 800px ) jak i szerekości ( 100% ), ale aby podczas zmniejszania szerekości obrazek się zmniejszał?

Zmniejszał czyli, aby zanikały piksele, które wychodzą poza obramowanie?

Wiem, że słabym polskim pisane, ale nie umiem jakoś "opisać" tego problemu ^_^

Comments

css -> overflow: hidden (?) dla elementu nadrzędnego dla img, którego max.szerokość będzie 100vw

---

a zadziała wtedy height: auto?

Answer 1

Prosto będzie zamiast pixeli zadziałać na jednostkach vh dla wysokości i vw dla szerokości ekranu. Np 100vw to cała szerokość ekranu na każdym urządzeniu.

Comments

No właśnie nie oto chodzi. Nie chce, aby cały obrazek był widoczny na mobilkach, ponieważ wtedy wysokość jest bardzo mała ( zarazem chce, aby obrazek się nie spłaszczał ).

Chciałbym, aby na mobilkach zdjęcie w szerokości było powiedzmy na środku a wysokość dobrana do niego proporcjonalna.

Ktoś mi przesłał kodzik na pw -> sprawdzę i dam znać czy działa :)