JS visszatérési érték használata képmérethez ?

JS visszatérési érték használata képmérethez ?
2022-01-08T18:07:25+01:00
2022-01-12T15:08:37+01:00
2022-10-15T21:21:30+02:00
BadGirl
JS vissza térési értékét -egész szám- szeretném felhasználni egy kép "width" értékének a beállítására.

Az alap koncepció, a felhasználó feltölt egy képet, hogyha a feltöltött kép szélessége egy adott határérték alatt van, akkor nem akarom módosítani, elfogadható.
Ha a feltöltött kép szélessége nagyobb, mint X, akkor átakarom méretezni.

Ilyet még nem csináltam, így nem tudom hogy van-e valami bevett módszer.
Én próbálkozásaim:

function imgSize(){ var myImg = document.querySelector(""); var realWidth = myImg.naturalWidth; var realHeight = myImg.naturalHeight; }
Ez a függvény megoldja, hogy megnézzem a kép méreteit.

Én így próbálkoztam:

(HTML-ben)

<img id = "pic" src="pic_trulli.jpg" width='klo()'>
JS-ben:

function klo() {return 40;}

Viszont nem akar működni.

Így második körben arra is gondoltam, hogy CSS-ben létrehozok egy osztályt és azzal állítom be a szükséges méreteket, ami jól is működik, csak az mindig lefut nem tudom szabályozni if-el.

<img id = "pic" src="pic_trulli.jpg" class="format">
Mutasd a teljes hozzászólást!

  • Szerintem a legegyszerűbb megoldás a css max-width lesz.
    Mutasd a teljes hozzászólást!
  • Bár a HTML-ben az egyes elemeknek (elem alatt az <img...>-t értem) vannak attribútumaik (mint például a width), de én mégis inkább azt mondanám, hogy érdemes őket két csoportra bontani: léteznek az eseményeket (onclick, onload, stb.), illetve az adatokat (width, height, src...) leíró attribútumok.

    Az eseményeknek adhatsz olyan JavaScript kódot, amit a böngésződ az esemény bekövetkezésekor végrehajt (például ha betöltődik a kép). Itt megtehetnéd azt tehát, hogy az onload esemény bekövetkezésekor meghívsz egy JavaScript eljárást, ami beállítja a kép méretét:

    <img onload="klo()">

    Amit te csináltál eredetileg

    <img width="klo()">
    az egyfajta data binding lenne, de ez - egyszerűen legalábbis - nem fog működni valamilyen framework, pl. Angular vagy React nélkül.
    Mutasd a teljes hozzászólást!
  • Szerintem nagyon rossz úton jársz ezzel a HTML keverése a JS-el dologgal. Mert így egy tesztelhetetlen zagyvalékot kapsz. Nem lehetsz biztos, hogy amikor létrejön az img akkor már ott van a helyén a js kód.
    Mutasd a teljes hozzászólást!
  • Érdemes lenne elengedni a JS?
    Kialakítom a felületet a felhasználó megadja a szükséges adatokat -szövegek, kép, email cím stb-
    és szerver oldalaon PHP feldolgozom ?

    Illetve, JS-eé validálni van értelme? mivel szerver oldalon ugyanúgy meg kell tenni, mivel a JS módosítható így false adat is küldhető szerver felé.

    Vagy a felhasználó többsége nem tudja módosítani a JS-t, mivel vagy nem ért hozzá vagy nem is érdekli. Viszont akkor is kell szerver oldalon validálni.

    Illetve lehet kezdő kérdés, de a fenti gondolat menetemből kikívánkozik. Ami szervez felé megy adat kizárólag ott validálom PHP-al?
    Mutasd a teljes hozzászólást!
  • Nem kell elengedni a JS-t, csak jobban kell szervezned. Egy oldalra, csak egy JS programot illesz be, ami praktikusan egy window.load - al indul, akkor már megkap minden HTML elemet. A programon belül iratkozz fel a az egyes DOM elemekre, és 
    ott iratkozz fel az eseményekre. Az is biztos, hogy hiába validálsz JS oldalon PHP oldalon is kell validálnod.
    Mutasd a teljes hozzászólást!
  • Szerintem is az a helyes, ha a szerveren maximalizálod a képek méretét, illetve ha css-sel formázod az oldalt. Ha a keresőoptimalizálás is számít, akkor egyenesen több méretben kell léteznie a képnek és a képernyőméretnek megfelelő felbontásút kell betölteni.

    De pl. egy js galéria készítése során a js-sel is lehet/kell méretezni (vagy inkább a kép méretéhez igazítani más elemeket), és ilyenkor ahogy H.Lilla is írta, a kép betöltése után tudod csak kiolvasni a kép valós méretét. Ez viszont nem olyan bonyolult, a Te problémádra a rövid megoldás kb. ez:

    <script> function resizeImage(imgElement) { if (imgElement && imgElement.naturalWidth > 40) { imgElement.style.maxWidth = '40px'; } } </script> <img src = "https://prog.hu/site/images/proghu-icon.png" id = "image" onload = "resizeImage(this)" alt = "">
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd