Nieskalowalny obrazek na całą szerokość

Question

Witam jak zrobić responsywny obrazek na całą szerokość zależny od diva w którym się znajduje aby nieskalował się podczas zmiany rozmiaru strony za pomocą CTRL+Scroll down ?

Answer 1

Tu masz przykład jak z poziomu JS zablokować możliwość zoomowania okna:

https://codepen.io/VijayDhanvai/pen/QdLJae

Możesz w tym miejscu wykonać jakieś swoje akcje, np. odpowiednio modyfikować rozmiary obrazka itp. 

Ale generalnie NIE POLECAM takiego rozwiązania. Jeśli użytkownik samodzielnie zwiększa/zmniejsza rozmiar to robi to z jakiegoś konkretnego powodu, może nie widzi i chce coś powiększyć itp. Nie blokuj tego, szczerze to nie widzę żadnego sensownego uzasadnienia dla ingerowania w takie zachowanie użytkownika.

Comments

Nie no te pop-upy to przypał jest :) Mi chodziło żeby IMG było nieskalowalne a nie żeby blokować akcje myszki :D

---

aby nieskalował się podczas zmiany rozmiaru strony za pomocą CTRL+Scroll down

chwila, sam piszesz, że chcesz trzymać rozmiar na akcji zoomowania, to w końcu co Ty chcesz zrobić?

W tym codepenie jest akurat alert ale dałem go, aby Ci pokazać jakiś sposób na przechwycenie zoomowania usera, a co z tym zrobisz to już od Ciebie zależy, tam autor akurat robi alert, Ty możesz odpowiednio ustawić wymiary obrazka.

---

Możesz dać wymiary obrazka w procentach, ale one będą liczone względem rodzica także jeśli np. dasz ograniczenie max-width dla body to i tak zostaną policzone max dla tej szerokości bidy.

---

No tak racja, dzięki :)

Answer 2

Ustaw mu rozmiary w pikselach, a nie w procentach.

Comments

https://codepen.io/anon/pen/xaRjQj

To i tak możesz zmniejszać poprzez CTRL+Scroll down, a autorowi chodzi o zablokowanie tego całkowicie.

---

A nie można ustawić max i min height tak żeby się zmniejszało do pewnego stopnia a dalej już nie ? No wiesz pewnie jak to wygląda na tych ładnych stronkach :)