FAQ |
Kalender |
2011-04-12, 11:49 | #1 | ||
|
|||
Nykomling
|
Hej
Jag har ett litet problem... jag är okunnig på CSS Jag undrar först och främst om det är möjligt att både hämta en bildinformation och dessutom skapa en IF-sats som anger en bestämd "width" eller "height" beroende på om det är en liggande eller stående bild? Det finns ett fungerande script i JAVA som gör detta, men som använder "ONLOAD", vilket är ett problem i IE8 som använder cache och vägrar läsa sidinnehåll när man backar med bakåtknappen. (Vilket betyder att onload inte körs och bilderna visas i sina originalstrolekar, och detta kan inte fixas) Se scriptet i denna tråd och berätta om det är möjligt att göra samma funktion i CSS: http://www.wn.se/showpost.php?p=20400296&postcount=10 Tack! |
||
Svara med citat |
2011-04-12, 12:20 | #2 | ||
|
|||
Mycket flitig postare
|
Kika på följande:
http://stackoverflow.com/questions/1...ditions-in-css |
||
Svara med citat |
2011-04-12, 12:32 | #3 | ||
|
|||
Nykomling
|
Okej, man kan skriva If i CSS, men går det att göra samma funktion som scriptet?
|
||
Svara med citat |
2011-04-12, 12:39 | #4 | ||
|
|||
Mycket flitig postare
|
Du kan ju hämta bildens width/height med ASP/PHP och sen kör du en IF-sats på det hela.
Tror det är tämligen omöjligt att hämta ut denna information med CSS? |
||
Svara med citat |
2011-04-12, 12:47 | #5 | ||
|
|||
Nykomling
|
Citat:
Det viktiga är att jag får samma resultat som i scriptet, men i "IMG TAGGEN" vill jag använda "CLASS" istället för "ONLOAD" för att bestämma bildens höjd eller bredd utifrån IF-satsens resultat. |
||
Svara med citat |
2011-04-12, 13:03 | #6 | ||
|
|||
Mycket flitig postare
|
Kod:
<?php $img = "1.jpg"; list($width, $height, $type, $attr) = getimagesize($img); echo "<img class='resize' src=\"$img\" $attr />"; ?> <style> img.resize{ <?php if($width>100){ echo"width:100px;"; } ?> } </style> |
||
Svara med citat |
2011-04-12, 13:37 | #7 | ||
|
|||
Har WN som tidsfördriv
|
Detta löser du bäst med JavaScript likt posten du länkade till.
CSS: Kod:
img.landscape {border: 5px solid red;} img.portrait {border: 5px solid blue;} Kod:
$(document).ready(function(){ $(".apply_image_class").each(function(){ if($(this).height() > $(this).width()){ $(this).addClass("portrait"); } else{ $(this).addClass("landscape"); } }); }); Kod:
<img src="min_bild.jpg" class="apply_image_class" alt="bild 1" /> <img src="min_andra_bild.jpg" class="apply_image_class" alt="bild 2" /> Lycka till! |
||
Svara med citat |
2011-04-12, 13:59 | #8 | ||
|
|||
Nykomling
|
Hej Karl
Det börjar likna en lösning! (Jag kör asp och kan inte köra PHP-script i sidan) Jag undrar dels om "jQuery" är kod som kan sättas in mellan "vanliga scripttaggar typ <script type="text/javascript"> </script> Sedan funderar jag på hur man gör för att använda samma script eller flera script med olika namn, för att kunna visa olika storlekar. I CSS skulle det bli flera av samma typ, men med olika namn/siffror: img.landscape64 {width:64px;} img.portrait64 {height:64px;} img.landscape192 {width:192px;} img.portrait192 {height:192px;} ...så att man direkt i IMG-taggen kan sätta en förutbestämd maxyta typ: <img src="min_bild.jpg" class="apply_image_class64" alt="bild 1" /> <img src="min_andra_bild.jpg" class="apply_image_class192" alt="bild 2" /> Hoppas du förstår hur jag menar. |
||
Svara med citat |
2011-04-12, 14:14 | #9 | ||
|
|||
Har WN som tidsfördriv
|
Förstår hur du menar!
jQuery ligger i <script>-taggar. Såhär skulle den delen kunna se ut i head för dig: Kod:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".apply_image_class").each(function(){ if($(this).height() > $(this).width()){ $(this).addClass("portrait").addClass("portrait_" + $(this).width()); } else{ $(this).addClass("landscape").addClass("landscape_" + $(this).height()); } }); }); </script> Kod:
<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class" /> Kod:
<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class portrait portrait_192" /> |
||
Svara med citat |
2011-04-12, 21:41 | #10 | ||
|
|||
Nykomling
|
Jag börjar med att be om ursäkt för min okunskap och för att jag kanske missat något uppenbart, men jag ser inte hur det skulle fungera.
Jag förklarar utgångsläget och vad jag vill uppnå... Jag har alltså ett stort antal bilder på servern som jag inte kan/vill skapa som miniatyrer i flera olika format. På en hemsida vill jag kunna visa dessabilder i olika maxstorlekar. (låt oss säga tre maxstorlekar på 192x192, 128x128 & 64x64) T ex: <img class="img_64" border="0" src="bild1.jpg> Bilderna är i alla möjliga storlekar och beskärningar, samt både liggande och stående. I alla webbläsare utom IE (som typiskt nog är den vanligaste) så fungerar följande kod: <img style="max-width:64px; max-height:64px;" border="0" src="bild1.jpg) Bilden visas inom maxstorleken OCH behåller sin aspect ratio, så det spelar ingen roll om det är en stående eller liggande bild. Problemet är att denna kod inte fungerar på IE, och att man därför måste göra en annan lösning som fungerar för alla webbläsare. Det var därför jag tänkte att CSS/CLASS kunde vara en lösning. Som jag skrev tidigare så fungerar scriptet jag länkade till i början av tråden, men istället för "onload" så behöver jag använda class i IMG taggen. Om den koden kan användas på något sätt tillsammans med CSS för at för fram en användbar CLASS så slipper dessutom köra Jquery. (Jag kanske rör till det, men hoppas att det går att förstå hur jag menar) |
||
Svara med citat |
Svara |
|
|