Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] dopasowanie strony do ekranu
Forum PHP.pl > Forum > Przedszkole
KeramxD
29.08.2014, 16:42:03
Witam, stworzyłem ułatwienie które mam zamiar używać na ios w przeglądarce. Obraz jest bardzo duży a chciałbym aby sie dopasowywal.

<html>
<table border="0" cellspacing="0" cellpadding="0">
<td>
<a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img src="http://i.imgur.com/h8ZWGNh.jpg" alt="" /></a>
</td>
<td>
<a href="http://grzegorz-zurek.asuscomm.com"><img src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
</td>
</tr>
</table>
tomi1985
29.08.2014, 17:50:07 
[HTML] pobierz, plaintext 
  1. <table style="width:100%;height:100%">
  2. ...
[HTML] pobierz, plaintext



powinno zadziałać
KeramxD
29.08.2014, 18:54:04
Nie działa.


Adres strony:
router.zurek.co
tomi1985
29.08.2014, 19:49:48
ponieważ kolego masz tam 2 duże obrazki które trzeba skompresować do rozmiaru przegladarki...

Najprostrzym rozwiązaniem "według mnie" będzie pobranie rozdzielczości ekranu za pomocą js, następnie od wartości szerokości odjąć Twój margines pomiędzy obrazkami, po czym podzielić tą wartość na pół i masz tu szerokość obrazka.

To wklej w nagłówku lub w pliku css
[HTML] pobierz, plaintext 
  1. <style>
  2. body {
  3. 	margin:0;
  4. 	padding:0;
  5.         text-align:center;
  6. }
  7. </style>
[HTML] pobierz, plaintext


a to na samym dole stronki i dodaj id obrazków które chcesz przeskalować
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var szer = screen.width/2;
  3. var wys	= window.innerHeight - 5;
  4.  
  5. document.getElementById("one").width 	= szer;
  6. document.getElementById("one").height 	= wys;
  7.  
  8. document.getElementById("two").width 	= szer;
  9. document.getElementById("two").height 	= wys;
  10. </script>
[HTML] pobierz, plaintext
trueblue
29.08.2014, 19:51:59 
[HTML] pobierz, plaintext 
  1. img{
  2.  max-width:100%;
  3.  height:auto;
  4. }
[HTML] pobierz, plaintext
KeramxD
29.08.2014, 20:00:50
Nie rozumiem.
Mógłbyś mi to wkleić do tego kodu co podałem? Byłbym bardzo wdzięczny.
tomi1985
29.08.2014, 20:04:06 
[HTML] pobierz, plaintext 
  1. max--width:100%
[HTML] pobierz, plaintext


i w jaki sposób to ma mu pomóc ?

a to w nagłówku strony "po znaczniku html" wink.gif
[HTML] pobierz, plaintext 
  1. <head>
  2. <style>
  3. body {
  4. 	margin:0;
  5. 	padding:0;
  6. 	text-align:center;
  7. }
  8.  
  9.  
  10. </style>
  11.  
  12.  
  13. </head>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. table id="demo" border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
  2. <td>
  3. <a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img id="one" src="http://i.imgur.com/h8ZWGNh.jpg" alt=""  /></a>
  4. </td>
  5. <td>
  6. <a href="http://grzegorz-zurek.asuscomm.com"><img id="two" src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
  7. </td> 
  8. </tr>
  9. </table>
  10.  
  11. <script type="text/javascript">
  12. var szer = screen.width/2;
  13. var wys	= window.innerHeight - 5;
  14.  
  15. document.getElementById("one").width 	= szer;
  16. document.getElementById("one").height 	= wys;
  17.  
  18. document.getElementById("two").width 	= szer;
  19. document.getElementById("two").height 	= wys;
  20. </script>
[HTML] pobierz, plaintext


Można jeszcze użyć

[HTML] pobierz, plaintext 
  1. document.getElementsByTagName('img')
[HTML] pobierz, plaintext


dla wszystkich zdjęć, wówczas zaoszczędzić można w tym wypadku 2 linijki kodu wink.gif
KeramxD
29.08.2014, 20:08:10
Dobra, ale zobacz co się teraz stało. Obrazki schowały się pod siebie, a chodzi o to żeby były koło siebie.
KeramxD
29.08.2014, 20:08:15
Dobra, ale zobacz co się teraz stało. Obrazki schowały się pod siebie, a chodzi o to żeby były koło siebie.
tomi1985
29.08.2014, 20:11:13
nie możliwe kolego ponieważ skopiowałem całą Twoją stronę i sprawdziłem u siebie wink.gif

masz tu cały kodzik swojej strony + modyfikacja kompresji zdjęć

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. 	margin:0;
  7. 	padding:0;
  8. 	text-align:center;
  9. }
  10.  
  11. </style>
  12.  
  13. </head>
  14.  
  15. <body>
  16. <table id="demo" border="0" cellspacing="0" cellpadding="0" style="width:100%;height:100%">
  17. <td>
  18. <a href="http://grzegorz-zurek.asuscomm.com:8081/downloadmaster/index.asp"><img id="one" src="http://i.imgur.com/h8ZWGNh.jpg" alt=""  /></a>
  19. </td>
  20. <td>
  21. <a href="http://grzegorz-zurek.asuscomm.com"><img id="two" src="http://i.imgur.com/eb1eMU0.jpg" alt="" /></a>
  22. </td> 
  23. </tr>
  24. </table>
  25.  
  26.  
  27. 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  28. 	<!-- Apple Touch Icons -->
  29. 	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  30. 	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
  31. 	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
  32. 	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
  33. 	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
  34. 	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-60x60.png" />
  35. 	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-120x120.png" />
  36. 	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-76x76.png" />
  37. 	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-152x152.png" />
  38. 	<!-- Windows 8 Tile Icons -->
  39.     	<meta name="msapplication-square70x70logo" content="smalltile.png" />
  40. 	<meta name="msapplication-square150x150logo" content="mediumtile.png" />
  41. 	<meta name="msapplication-wide310x150logo" content="widetile.png" />
  42. 	<meta name="msapplication-square310x310logo" content="largetile.png" />
  43. <script type="text/javascript">
  44. var szer = screen.width/2;
  45. var wys	= window.innerHeight - 5;
  46.  
  47. document.getElementById("one").width 	= szer;
  48. document.getElementById("one").height 	= wys;
  49.  
  50. document.getElementById("two").width 	= szer;
  51. document.getElementById("two").height 	= wys;
  52. </script>
  53. </body>
  54.  
  55. </html>
[HTML] pobierz, plaintext
KeramxD
29.08.2014, 20:15:20
Działa, wielkie dzięki. Trochę rozciąga, ale to już wina wymiarów grafiki.
tomi1985
29.08.2014, 20:16:47
zawsze mozna jakies proporcje ustawić jak chcesz wink.gif i będzie git ale wówczas nie będzie w 100 % na całej stronie
KeramxD
29.08.2014, 20:19:20
Ale telefon trochę świruje:

tomi1985
29.08.2014, 20:30:39
Podmień

[HTML] pobierz, plaintext 
  1. var szer = screen.width/2;
  2. var wys = window.innerHeight - 5;
[HTML] pobierz, plaintext


na 

[HTML] pobierz, plaintext 
  1. var ratio = window.devicePixelRatio || 1;
  2.  
  3. var szer 	= (screen.width*ratio)/2 - 0;
  4. var wys		= (window.innerHeight*ratio) - 5;
[HTML] pobierz, plaintext


i daj znać
KeramxD
29.08.2014, 20:40:48
Na telefonie to samo, natomiast na komputerze zmieniło się przesunięcie.
tomi1985
29.08.2014, 20:45:37
hmmm dziwne ponieważ na ipadzie jest już idealnie... ale na iphonie faktycznie lipa nadal ....

podmień to na to 

[HTML] pobierz, plaintext 
  1. var szer 	= document.documentElement.clientWidth/2 ;
  2. var wys		= document.documentElement.clientHeight - 5;
[HTML] pobierz, plaintext
KeramxD
29.08.2014, 20:48:50
U mnie na na iPadzie też idealnie.

Śmiga, więlkie dzięki. A co gdybym w przyszłości chciał np dodać kolejną ikonkę? (3 fragment obrazka). Dodam kolejną tabelę z odnośnikiem a w skrypcie będę musiał coś mieszać?
tomi1985
29.08.2014, 20:50:58


musiałbyś to podzielić przez 3 wink.gif to raz a dwa to dodać kolejne id

czyli np. 

[HTML] pobierz, plaintext 
  1. document.getElementById("three").width 	= szer;
  2. document.getElementById("three").height 	= wys;
[HTML] pobierz, plaintext
trueblue
29.08.2014, 21:12:18
Cytat(tomi1985 @ 29.08.2014, 21:04:06 ) *
[HTML] pobierz, plaintext 
  1. max--width:100%
[HTML] pobierz, plaintext

Na pewno -- nie pomoże.
Ale widzę, że wolicie zamęczać stronę kodem JS, niż zapoznać się z podstawami wprowadzania responsywności do strony.
tomi1985
29.08.2014, 21:20:40
łał ... literówka....

to sobie sprawdź czy to co podałeś pomoże aby zdjęcia zawsze były na całym oknie

gdzie np. zdjecie ma 2500x1500 x2 zdjęcia

a rozdzielczość ekranu np. 800x600

powodzenia wink.gif
trueblue
29.08.2014, 21:25:44
A ty sprawdzałeś?
http://jsfiddle.net/0551jhfo/
tomi1985
29.08.2014, 21:27:18
a gdzie caly skrypt + mój js ?

a pozniej porównaj z swoim css'em wink.gif
trueblue
29.08.2014, 21:28:24
Nie bardzo rozumiem, po co JS?
Nie widzisz stylów inline przy img?
tomi1985
29.08.2014, 21:29:38
http://jsfiddle.net/0551jhfo/1/ vs http://jsfiddle.net/0551jhfo/

porównaj to zrozumiesz

zrób mi taki sam efekt jak w pierwszym linku przy różnych rozdzielczościach ekranu + rożne wymiary zdjęć, również na urządzeniach mobilnych uzywając sztywnego css'a

aaaa i oczywiście nie wiesz jaką rozdzielczość zdjęcie będzie mieć jak i jaką rozdzielczość będzie miec monitor na którym będzie wyświetlana strona. Także wszystko musi być dynamicznie przypisywane.

pokaż proszę...
trueblue
30.08.2014, 09:39:13
http://jsfiddle.net/br2rf3ds/
tomi1985
30.08.2014, 09:42:27
i gdzie są te obrazki ? bo coś ich tam nie widać wink.gif
trueblue
30.08.2014, 09:50:03
Ściągnij i odpal lokalnie.
Jeśli nie chcesz, to: http://jsfiddle.net/br2rf3ds/2/
tomi1985
30.08.2014, 09:56:07
pionjowy scroll jest... choc i tak jestem pod wrazeniem tongue.gif
trueblue
30.08.2014, 15:44:04
Pionowy scroll jest tu akurat zjawiskiem naturalnym.

http://jsfiddle.net/br2rf3ds/3/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.