Prog.Hu

Weblap megjelenítése különböző felbontáshoz
50

2013-09-08T23:54+01:00
H.Tibcsi
H.TibcsiProg.Hu
regisztrált tag
hello

Mi a trükkje annak, hogy egy weblapra beszúrt kép (vagy akár a szöveg) mindig ugyanolyan arányú helyen jelenjen meg, függetlenül a felhasználóknál összevissza állított képernyőfelbontásoktól.
És még egy : ha háttérképnek megadok a jpg.-t és az alap 1024X768- ra tökéletesen illik, HOGYAN oldható meg az, hogy szélesítse vagy magasítsa a képet a különböző felbontásokhoz ?
Mutasd a teljes hozzászólást!
Weblap megjelenítése különböző felbontáshoz
2013-09-08T23:54+01:00
H.Tibcsi
H.TibcsiProg.Hu
regisztrált tag
index.html
<html>
<head>
<title>Háttér igazítása</title>
<script language="JavaScript" type="text/javascript">
function hatter(){
document.body.background='hatter.php?szeles='+screen.width+'&magas='+screen.height
}
</script>
</head>
<body onload="hatter()">
</html>



hatter.php
<?
@header("Content-type:image/jpeg");

$hatter="hatter.jpg";

$szeles=$_GET['szeles'];
if($szeles==""){$szeles=1024;}

$magas=$_GET['magas'];
if($magas==""){$magas=768;}

$gau=@getimagesize($hatter);
$img=@imagecreatefromjpeg($hatter);
$dst=@imagecreatetruecolor($szeles,$magas);
@imagecopyresampled($dst,$img,0,0,0,0,$szeles,$magas,$gau[0],$gau[1]);
@imagejpeg($dst);
?>

ez engem is érdekelt gyors megírtam
Mutasd a teljes hozzászólást!
Oszd meg másokkal is!

JS-el le tudod kérni a kliens felbontását:
window.availWidth és window.availHeight tárolja.
Ennek függvényében js-el oylan html kódot tudsz generálni, ami mindig az adott felbontásra illeszkedik.
Esetleg ettől függően tudsz css file-t beágyazni, pl: css800_600.css és css1024_768.css dinamikusan ágyazódnak be.

A kép nyújtását pedig szerintem nem lehet megoldani, max a kép ismétlődését.
Mutasd a teljes hozzászólást!
A kép nyújtását pedig szerintem nem lehet megoldani,

Egy kis php kód és meg lehet.
(Van rá itt is sok-sok példa)
Mutasd a teljes hozzászólást!
index.html
<html>
<head>
<title>Háttér igazítása</title>
<script language="JavaScript" type="text/javascript">
function hatter(){
document.body.background='hatter.php?szeles='+screen.width+'&magas='+screen.height
}
</script>
</head>
<body onload="hatter()">
</html>



hatter.php
<?
@header("Content-type:image/jpeg");

$hatter="hatter.jpg";

$szeles=$_GET['szeles'];
if($szeles==""){$szeles=1024;}

$magas=$_GET['magas'];
if($magas==""){$magas=768;}

$gau=@getimagesize($hatter);
$img=@imagecreatefromjpeg($hatter);
$dst=@imagecreatetruecolor($szeles,$magas);
@imagecopyresampled($dst,$img,0,0,0,0,$szeles,$magas,$gau[0],$gau[1]);
@imagejpeg($dst);
?>

ez engem is érdekelt gyors megírtam
Mutasd a teljes hozzászólást!
Érdemes minnél nagyobb felbontású képet beállítani mert ahogy most néztem egy 1024x768-as képet 1280x1024-ben kicsit elmosódott!
Mutasd a teljes hozzászólást!
Ez tényleg ügyes kód. Ki fogom próbálni. De ugye nem csak kétféle felbontáshoz jó. A laptopomon kb 8 féle felbontás van. Ismerőseim körében is legalább öt féle különböző kép felbontást használnak.......
Mutasd a teljes hozzászólást!
Ha 16:9-es az arány akkor kicsit bővíteni kell a kódot ez a hagyományos 4:3-as arányra csináltam! De kevés ember van aki 2 monitoron néz egy képernyőt felezve ha erre gondoltál.
Mutasd a teljes hozzászólást!
ja meg mégegy fontos pl ennél

<html>
<head>
<title>Háttér igazítása</title>
<script language="JavaScript" type="text/javascript">
function hatter(){
document.body.background='hatter.php?szeles='+screen.width+'&magas='+screen.height
}
</script>
</head>
<body onload="hatter()">
</html>


Tegyük fel kep.jpg a háttérképem neve. (nincs más útvonal, mert a mappa ugyanaz) Hova írjam a nevét?
Mutasd a teljes hozzászólást!
<?
@header("Content-type:image/jpeg");

$hatter="hatter.jpg";

$szeles=$_GET['szeles'];
if($szeles==""){$szeles=1024;}

$magas=$_GET['magas'];
if($magas==""){$magas=768;}

$gau=@getimagesize($hatter);
$mag=floor($szeles*$gau[1]/$gau[0]);

if($mag!=$magas){
$magas=$mag;
}

$img=@imagecreatefromjpeg($hatter);
$dst=@imagecreatetruecolor($szeles,$magas);
@imagecopyresampled($dst,$img,0,0,0,0,$szeles,$magas,$gau[0],$gau[1]);
@imagejpeg($dst);
?>

Ez a kód a szélességhez igazodik és az alapján csinálja a magasságot. Tehát ha van egy 1024x768-as képed de 1360x768-ban nézed akkor az arányok megmaradnak és nem egy táglalapot kapsz.
Mutasd a teljes hozzászólást!
A PHP-ben kell beállítani, az méretezi át a képet!

$hatter="kepek/hatterek/wallpaper_14149137.jpg";
Mutasd a teljes hozzászólást!
és ha nem a képernyő hanem a böngésző szélességére akarod állítani, akkor: document.body.clientWidth és document.body.clientHeight lesz screen.width és screen.height helyett de akkor rakd be a <body> tagbe ezt is: onresize="hatter()"
Mutasd a teljes hozzászólást!
csináltam egy képet, a példád kedvéért hatter.jpg-ként mentettem el. Megcsináltam a hatter.php állományt (csak másoltam és beillesztettem a te kódod egy üres php állományba)

index.html- fájt úgyszintén. Egy mappába a kép+php+html)

Hát nekem nem működik.

Sajnálom nagyon , pedig biztos jó.

Sablonként szívesen használtam volna.

Igaz , ha megnyitom az index.html - legalább nem jelez ki hibát a javascript- de sajnos hó fehér semmiség marad a háttér.
Mutasd a teljes hozzászólást!
Szia!

Én így csinálom és eddig jól működött:


<?php

// Ablak szélessségét menti el sütiben
if (!$_COOKIE['ablak_szelesseg']) { ?>
<script type="text/javascript">
<!--
if (window.screen.width == 1024 || window.screen.width == 1280)
  document.cookie = "ablak_szelesseg="+window.screen.width+"; expires=Fri, 31 Dec 2999 23:59:59 GMT;";
else if (window.screen.width <= 800)
  document.cookie = "ablak_szelesseg=1024; expires=Fri, 31 Dec 2999 23:59:59 GMT;";
else if (window.screen.width > 1280)
  document.cookie = "ablak_szelesseg=1280; expires=Fri, 31 Dec 2999 23:59:59 GMT;";
document.location.reload();
-->
</script>
<? }
$ablak_szelesseg = $_COOKIE['ablak_szelesseg'];
?>

<link rel="stylesheet" href="themes/<?=$ablak_szelesseg?>/style.css" type="text/css">
Mutasd a teljes hozzászólást!
Szerk.: És így nem csak a hátteret tudod módosítani, mert azzal sokra nem mész, ha minden más marad abban a méretben, amiben tesztelted. Így az themes/1024 és a themes/1280 mappába betehetsz képeket és style.css-t így gykorlatilag akár két tök más oldalt is felépíthetsz css-sel. Tudsz módosítani div szélességet, fontméretet, hátteret, bármit...
Mutasd a teljes hozzászólást!
és át is kell méretezned hozzá 99999999 képet a 9999999 fajta képernyőfelbontáshoz ami 9999999-szer több helyet fog elfoglalni a szerveren okos lehet hogy ez tényleg jobb
Mutasd a teljes hozzászólást!
OK. Már nekem is jó.
Sorry

(olyan mappába mentettem és nyitottam meg ,amit nem fordít a php motorom)
Mutasd a teljes hozzászólást!
és ezt minden alkalommal meg kell tenni, amikor egy új hátteret raksz be
Mutasd a teljes hozzászólást!
Miért is kellene? Ha megnézed amit írtam én csak az 1024-gyel és 1280-nal foglalkozom, de a többi felbontást is kezeli, szóval minden képből kell egy másikat is csinálni ez igaz.
De még mindig takarékosabb, mint 999999999 képnél és 999999999 div backgroundnál a te php-dat meghívni, nem? Inkább plusz 10 Mb (ami már erős túlzás) a szerveren, mint monjduk 10-20 alkalommal végigfuttatni egy képátméretezős szkriptet.

Döntsd el te melyik a jobb

És lehet nem örülnék neki, ha minden egyes lapbetöltésnél nekem arra kellene várnom, hogy az 1024-es felbontásomhoz méretezzen a lapod egy 1600x1200-es képet például. Meg a szervert is sokkal jobban terheli.
Mutasd a teljes hozzászólást!
én az időt sajnálnám rá és nem csak 2 felbontás létezik amúgy valóban jobb lenne ha meglennének előre a képek ezért itt egy jobb PHP script erre:

<?
$hatter="eredeti_hatter.jpg";

$szeles=$_GET['szeles'];
$magas=$_GET['magas'];

if(file_exists($szeles.'x'.$magas.'.jpg')){
@header("Location: ".$szeles."x".$magas.".jpg");
}else

if(($szeles==640 && $magas==480) or ($szeles==800 && $magas=600) or ($szeles==1024 && $magas=768) or ($szeles==1152 && $magas=864) or ($szeles==1280 && $magas=1024)){

$gau=@getimagesize($hatter);
$mag=floor($szeles*$gau[1]/$gau[0]);

if($mag!=$magas){
$magas=$mag;
}

$img=@imagecreatefromjpeg($hatter);
$dst=@imagecreatetruecolor($szeles,$magas);
@imagecopyresampled($dst,$img,0,0,0,0,$szeles,$magas,$gau[0],$gau[1]);
@imagejpeg($dst,$szeles.'x'.$magas.'.jpg');

@header("Location: ".$szeles."x".$magas.".jpg");

}else{
@header("Location: $hatter");
}
?>

A többi képernyő felbontást be lehet írogatni
Ha már létezik az user felbontásának megfelelő kép akkor azt adja be, ha nem létezik akkor létrehoz egyet és onnantól kezdve azt adja be!
Mutasd a teljes hozzászólást!
Valószínűleg én is a te kódod használnám ha egyetlen egy hátteret kellene módosítgatni, mert így tényleg egyszerűbb.

De ez csak a kérdés 2. fele

Mi a trükkje annak, hogy egy weblapra beszúrt kép (vagy akár a szöveg) mindig ugyanolyan arányú helyen jelenjen meg, függetlenül a felhasználóknál összevissza állított képernyőfelbontásoktól.


Felzünk pontot?
Mutasd a teljes hozzászólást!
sztem egy topic 1 kérdés de valóban itt 2 kérdés van
Mutasd a teljes hozzászólást!
HA MÁR ÚGYIS KÉT KÉRDÉST TETTEM FEL , AKKOR MÉG AZT MONDJÁTOK MEG . Én csak fájlból beszúrt képet tudok, (vagy annak egy kijelölt szeletét) linkelni.
Csak én nem tudok vagy MÁS SEM tud háttérkép egy kijelölt szeletét meglinkeltetni ??
Sehogy nem lehet background-ként beállított kép egy cikkét meglinkelni ?
Mutasd a teljes hozzászólást!
Oszd meg másokkal is!