Formatowanie canvas'a w css

Question

Posiadam obiekt napisany w canvasie będący prostokątem 511x460px. Aktualnie jego style wyglądają tak:

canvas
{
	width: 100%;
	height: auto;
}

Problem polega na tym, że jeżeli przeglądarka nie jest wystarczająco wysoka pojawia się pasek przewijania, a potrzebuje, aby w takiej sytuacji obiekt został zmniejszony, aby to nie było wymagane. Próbowałem coś zdziałać przy użyciu @media, niestety nie mogłem znaleźć, ani wymyślić  nic co by zadziałało. Głównym problemem(zdaje się) było to, że nie jestem w stanie zrobić kilku wersji css, a dla szerokości większej od długości i odwrotnie. Jeżeli ktoś wie jak rozwiązać ten problem i chciałby pomóc będę bardzo wdzięczny za odpowiedź.

Answer 1

Może max-height? Tak swoją drogą ustawianie wielkości canvasu w cssie z tego co pamiętam potrafi trochę namieszać

Comments

Hm... udało mi się zrobić coś takiego

canvas
{
	width: 100%;
	height: auto;
	max-height: 99vh;
}

i działa, tzn zmniejsza wysokość tak, aby się zmieściło. Tylko teraz pozostaje problem, że zmieniają się proporcje obiektu. Co do namieszanie to wiem, od samego początku były przygody(pierwszy raz z canvasem)

---

Jeżeli wysokość canvasa ci w jakikolwiek sposób pomoże to możesz ją zapisać do zmiennej używając:

document.getElementById('myCanvas').clientHeight;

ew. jeśli potrzebujesz wysokość razem z borderami, paddingiem i marginesami jest jeszcze:

document.getElementById('myCanvas').offsetHeight