Pomoc s webem

V minulosti fórum o online-chatu, nyní již takový obecný pokec ;)

Moderátoři: GunShop.cz, Moderátoři

Uživatelský avatar
Warthog
Příspěvky: 1638
Registrován: 20 bře 2010 23:59
Bydliště: Rijnland (NL), Sudetenland (CZ)

Re: Pomoc s webem

Příspěvek od Warthog » 15 led 2012 13:54

u IMG nastavíš velikost na 100 % a obalíš to DIVem nějak takhle:

Kód: Vybrat vše

<div id = "obrazek">
  <img src = "obrazek.jpg" width = "100%">
</div>
Zbytek je stejný - nastavíš velikost objektu s id "obrazek", což teď nebude IMG ale DIV a obrázek se přizpůsobí.



Laßt uns fest zusammenhalten - In der Eintracht liegt die Macht - Mit vereinter Kräfte Walten - Wird das Schwere leicht vollbracht
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 15 led 2012 14:49

Kam pak vložím onload = resize() aby to fungovalo? Fakt jsem v tom začátečník a hodně s tím bojuji. Díky
Uživatelský avatar
Warthog
Příspěvky: 1638
Registrován: 20 bře 2010 23:59
Bydliště: Rijnland (NL), Sudetenland (CZ)

Re: Pomoc s webem

Příspěvek od Warthog » 15 led 2012 16:08

Ups, mea maxima culpa - nech to u toho obrázku, jako v původním příkladu. Když jsem psal ten druhý, tak mi to vypadlo.

Laßt uns fest zusammenhalten - In der Eintracht liegt die Macht - Mit vereinter Kräfte Walten - Wird das Schwere leicht vollbracht
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 15 led 2012 16:59

Ok klidně to tak nechám. Jenom malá drobnost. Ten šmejd od Microsoftu to nepřelouská. Takže na IE to nefunguje. Já osobně používám firefox, ale musím to mít funkční i na IE. Poradíš? Díky
Uživatelský avatar
Warthog
Příspěvky: 1638
Registrován: 20 bře 2010 23:59
Bydliště: Rijnland (NL), Sudetenland (CZ)

Re: Pomoc s webem

Příspěvek od Warthog » 15 led 2012 17:19

Večer na to kouknu, měl jsem za to, že IE7 a novější už zvládají tyhle věci rozumně.

Laßt uns fest zusammenhalten - In der Eintracht liegt die Macht - Mit vereinter Kräfte Walten - Wird das Schwere leicht vollbracht
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 15 led 2012 17:34

V téhle variantě to IE nepobere

Kód: Vybrat vše

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Nová stránka 1</title>
</head>

<body>
<script language="JavaScript">
function resize(){
var  image = document.getElementById('obrazek');
var  imageWidth = image.width;
var  containerWidth = window.innerWidth;
if ( imageWidth > containerWidth){
document.getElementById('obrazek').width = containerWidth * 0.5;
}
}
</script>

<img id = "obrazek" src = "obrazek.jpg" onload = resize()>

</body>

</html>
díky
Uživatelský avatar
Warthog
Příspěvky: 1638
Registrován: 20 bře 2010 23:59
Bydliště: Rijnland (NL), Sudetenland (CZ)

Re: Pomoc s webem

Příspěvek od Warthog » 20 led 2012 08:47

Tak tady to máš.

Kód: Vybrat vše

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>

   <style type="text/css">
       .container {
           border:1px solid red;
           width: 400px;
           margin-bottom: 1em;
           text-align:center;
           padding-bottom:1em;
       }
   </style>

   <script type="text/javascript" language="javascript">

       function resizeAll() {
           resize('obrazekVelky', 'containerVelky');
           resize('obrazekMaly', 'containerMaly')
       }

      function resize(idObrazek, idContainer){
         var  image = document.getElementById(idObrazek);
         var  imageWidth = image.width;
         var containerWidth = document.getElementById(idContainer).offsetWidth;
         
         if ( imageWidth > containerWidth){
            image.width = containerWidth * 0.9;
         }
      }
   </script>
</head>
<body onload="resizeAll()">

   <div class="container" id="containerVelky">
       Velký: <br />
       <img id="obrazekVelky" src="http://www.cooperativeindividualism.org/library-books.jpg">
   </div>

   <div class="container" id="containerMaly">
       Malý: <br />
       <img id="obrazekMaly" src="http://www.marketresearchworld.net/images/stories/icon_library.gif">
   </div>

</body>
</html>

Laßt uns fest zusammenhalten - In der Eintracht liegt die Macht - Mit vereinter Kräfte Walten - Wird das Schwere leicht vollbracht
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 03 úno 2012 16:07

Ještě jsem ti nepoděkoval, takže díky moc, moc! Všechno funguje, šlape. Trochu jsem musel script upravit a teď už je to 100%. Tady jsem přidal ještě jednu hodnotu.

function resize(idObrazek, idContainer){
var image = document.getElementById(idObrazek);
var imageWidth = image.width;
var containerWidth = document.getElementById(idContainer).offsetWidth;

if ( imageWidth > containerWidth * 0.6){
image.width = containerWidth * 0.6;


Mám ale ještě (doufám) poslední otázku. Jak by tenhle script vypadal, kdyby jsme místo šířky obrázku dali výšku obrázku? Různě jsem to zkoušel přepisovat, ale nic mi nefungovalo. Díky
Uživatelský avatar
Warthog
Příspěvky: 1638
Registrován: 20 bře 2010 23:59
Bydliště: Rijnland (NL), Sudetenland (CZ)

Re: Pomoc s webem

Příspěvek od Warthog » 03 úno 2012 18:08

Možná ne úplně chápu otázku, ale místo atributu width jde použít height a bude to chodit taky. Samozřejmě úplně nejčistší by byla složitější logika, která by hlídala obojí najednou, včetně situací, kdy obrázek je větší v obou rozměrech o hodně apod. Záleží na tom, jak moc si s tím chceš hrát.

Laßt uns fest zusammenhalten - In der Eintracht liegt die Macht - Mit vereinter Kräfte Walten - Wird das Schwere leicht vollbracht
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 03 úno 2012 19:55

No pravě. Když všechno přepíšu na "height" tak to nefunguje a nevím proč. Mě to taky hned napadlo přepsat, ale nejde to. Jinak všechno ostatní funguje, už složitější to nechci :D Bohatě mi to takhle vyhovuje, jenom místo "width" by bylo lepší "height"
Uživatelský avatar
pussylala
Příspěvky: 1426
Registrován: 31 srp 2007 23:54
Bydliště: Praha 5
Kontaktovat uživatele:

Re: Pomoc s webem

Příspěvek od pussylala » 09 úno 2012 02:15

Tak nakonec jsem použil původní kód, co jsi mi poslal, ale místo příkazu window.innerHeight, který IE nepodporuje, jsem použil document.documentElement.clientHeight. Samozřejmě všechno jsem pozměnil na Height. Díky za vše. Doufám, že tímhle jsem kapitolu "resize" ukončil :D

Kód: Vybrat vše

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>

<body>
<script language="JavaScript">
function resize(){
var  image = document.getElementById('obrazek');
var  imageHeight = image.height;
var  containerHeight = window.innerHeight;
if ( imageHeight > containerHeight){
document.getElementById('obrazek').height = containerHeight * 0.5;
}
}
</script>

<img id = "obrazek" src = "obrazek.jpg" onload = resize()>

</body>

</html>
Odpovědět