ugrás a tartalomhoz

arány lekérdezése pixelben

domel · 2015. Feb. 27. (P), 00.17
Üdv! Van egy táblázatom

<table id="xakk" style="height:100px; width: 50%;"  border="1">
<tr>
<td>&nbsp;</td>
</tr>
</table>
és azt szeretném megoldani, hogy a táblázat magassága mindig egyenlő legyen a szélességgel. Vagyis akármekkora a képernyő (telefonok), mindig kocka legyen a táblázat. Ha átmásolom a szélességet a magasságra

           var h=parseInt(document.getElementById("xakk").style.width);
                          document.getElementById("xakk").style.height = h + "px";
az nem jó, mert az egyik % a másik pixel, és %-ot nem másolhatok a magasságra mert akkor meg a képernyő-magasság %-a lesz a táblázat magassága és így nem lesz kocka.
Tulajdonképpen a %-ban megadott szélességet kellene megkapnom pixelben, és ez is lenne a kérdésem, hogy ezt hogyan lehetne megoldani?

Üdv: Domel
‹ Chrome kiegészítő Firefoxra Javascript HTML5 és némi matematika. ›
 ■
1

CSS only

bamegakapa · 2015. Feb. 27. (P), 01.13
Létezik erre sima CSS megoldás, bár igényel egy kis plusz HTML-t. Kevésbé ismert tulajdonsága a padding értéknek, hogy ha százalékos formában adod meg, a szülő elem szélességéből lesz kiszámolva - a padding-top és padding-bottom is!

Tehát egy üres doboz, amire megadod mondjuk ezt:

.square-container {
    width: 80%;
    padding-bottom: 80%;
}
egy remek négyzetet eredményez! Itt merül fel a probléma, hogy a doboz üres - nem elég jó. Ezért belerakunk egy másik dobozt, ami abszolút pozícionált (tehát a dobozunkat üresen hagyja, mivel tudjuk, hogy kikerül teljesen a flow-ból), valamint megadjuk rajta a top, left, bottom, right értékeket, mondjuk mind 0-ra (más értékkel is lehet játszani persze). Ennek (valamint persze a külsőre rakott relatív pozícionálás) hatására a belső doboz felveszi a külső doboz méretét és ebbe már azt rakunk, amit akarunk! A legegyszerűbb az lenne, ha a belső doboz maga a táblázat lenne, de ez nem működik számomra ismeretlen oknál fogva, így a táblázatot belerakjuk a belső dobozba, rakunk egy rá egy width: 100%; height: 100%-ot, voilá.

Itt a demó hogy lásd nem hazudok :).

Ha túl sok így a div az ízlésednek, talán akkor is segít elindulni egy finomított megoldáshoz, hirtelen erre futotta.
2

hirtelen?

domel · 2015. Feb. 27. (P), 10.05
Hirtelen erre futotta? Én tegnap éjfélig ezzel szenvedtem, de még a google sem volt a barátom. Köszi a segítséget!
4

Ha kereső kifejezés után ezt

spapp · 2015. Feb. 27. (P), 10.10
Ha a kereső kifejezés után ezt írod be: site:stackoverflow.com, akkor javíthatod az esélyeidet.

Persze a domain más is lehet, annak függvényében, hogy hol látod nagyobb esélyét a pozitív találatnak.
3

Ha esetleg mégis ragaszkodsz

spapp · 2015. Feb. 27. (P), 10.05
Ha esetleg mégis ragaszkodsz a javascript-hez:

var table = $('#table');

table.height(table.width());
vagy

var table = document.getElementById('table');

table.style.height = table.offsetWidth + 'px';
5

a második a nyerő

domel · 2015. Feb. 27. (P), 15.28
A második megoldás az működik, köszi szépen.
(elsőnél ugyanaz a gond mint nálam, hogy a % nem keverhető a pixellel, ha meg %-ot másolsz %-ra, akkor nem lesz kocka, mert a képernyő magasságából számolja azt, amit előtte a képernyő szélességéből számított)
6

http://jsfiddle.net/bo7fyv44/

spapp · 2015. Feb. 27. (P), 16.01
http://jsfiddle.net/bo7fyv44/
7

nem fontos

domel · 2015. Feb. 27. (P), 16.11
Azt már csak érdekességnek írom le, hogy az unicredit bank telefonos felülete nagyon megtetszett és gondoltam lemásolom

ennek a menünek teljesen mindegy a telefon felbontása, arányaiban ugyanígy néz ki egy 720pixel széles képernyőn és egy 480pixel széles képernyőn is. A kódja ritka-bonyolult, de egy képből veszi az ikonokat

amit div-ekbe tölt háttérképként:
a div mérete 45x45 pixel
backgroundimage: url(...
background-position: 135px 90px (például)
és számomra azért érdekes az egész, mert ezeket a képeket még fel is nagyítja méretarányosra (egyik telefonomon 96x96 pixelre) amit ilyen képből-kép módszerrel nem tudom hogyan csinál. Linket sajna nem tudok adni, mert ha adnák, akkor elköltenétek a pénzem :-D
Ez a része igazából nem érdekes, mert én meg méretarányos táblázatba teszek méretarányos képeket, és az eredmény ugyanaz.