WN - Någon som är expert på att koda CSS?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Någon som är expert på att koda CSS? (https://www.wn.se/forum/showthread.php?t=1047651)

Någon som är expert på att koda CSS?

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!

Okej, man kan skriva If i CSS, men går det att göra samma funktion som scriptet?

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?

Citat:

Ursprungligen postat av WeaZear (Inlägg 20401714)

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?

Kan du visa ett exempel?

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.

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>

Med modifikation efter vad du söker kan nog detta funka.

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;}

jQuery:

Kod:

$(document).ready(function(){



        $(".apply_image_class").each(function(){

                if($(this).height() > $(this).width()){

                        $(this).addClass("portrait");

                }

                else{

                        $(this).addClass("landscape");

                }

        });



});

HTML:

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" />

Det den här koden gör är att gå igenom alla bilder som har klassen "apply_image_class" och kollar om höjden är större än bredden, då får bilden klassen "portrait", annars får bilden klassen landscape. CSS:en är bara ett exempel, förhoppningsvis ser du resultatet.

Lycka till!

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.

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>

Exempel. Bilden min_bild.jpg är 192px hög och 100px bred. Den ser ut såhär innan scriptet körs:

Kod:

<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class" />

Efter scriptet ser den ut såhär:

Kod:

<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class portrait portrait_192" />

Hoppas det funkar för dig!

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)