[OXI solved]background width με css?

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Nemesis_Elite
Δημοσιεύσεις: 348
Εγγραφή: 14 Μαρ 2009 22:51
Τοποθεσία: athens

[OXI solved]background width με css?

Δημοσίευση από Nemesis_Elite » 22 Ιούλ 2011 10:57

δε μπορώ να βρώ λύση στο εξής:

τα thumbs έχουν διάφορες διαστάσεις

δε θέλω να εμφανίζονται όμως τα thums με διαφορετικές διαστάσεις, θέλω ακριβώς να εφμανίζονται τετράγωνα 50x50.

1. θα αναγκαστώ να δώσω στο img width="50" height="50" αλλά θα παραμορφωθεί η photo.

2. για να μην παραμορφωθει σκεφτομαι να κάνω div που να πέρνει background το thumb... αλλά πως θα δώσω width και height σε backround? ώστε να μην γίνετε "crop" στην εικόνα?

δοκιμασα αυτό αλλα τίποτα

Κώδικας: Επιλογή όλων

min-height:50px;
height: auto !important;
height:50px; 
Τελευταία επεξεργασία από το μέλος Nemesis_Elite την 22 Ιούλ 2011 11:34, έχει επεξεργασθεί 2 φορές συνολικά.

Άβαταρ μέλους
Nemesis_Elite
Δημοσιεύσεις: 348
Εγγραφή: 14 Μαρ 2009 22:51
Τοποθεσία: athens

[OXI solved]background width με css?

Δημοσίευση από Nemesis_Elite » 22 Ιούλ 2011 11:02

πολλες φόρες είναι τόσο προφανής η λύση...css3

έδωσα και background-size:80px;

Άβαταρ μέλους
Nemesis_Elite
Δημοσιεύσεις: 348
Εγγραφή: 14 Μαρ 2009 22:51
Τοποθεσία: athens

[OXI solved]background width με css?

Δημοσίευση από Nemesis_Elite » 22 Ιούλ 2011 11:37

βάζοντας σε html ΔΟΥΛΕΥΕΙ μια χαρα, κετραρει την photo εκεί που θέλω τετράγωνη ακριβώς στο background.

Κώδικας: Επιλογή όλων

<div style="width&#58;60px; height&#58;60px; background&#58;url&#40;photo.jpg&#41;;
background-position&#58;center; background-repeat&#58;no-repeat; background-size&#58;80px; min-height&#58;60px; height&#58; auto !important; height&#58;60px; ">photo
</div>

Όταν όμως το βάζω στην php το background εμφανίζετε κανονικά αλλά όχι σε
σε διαστάσεις κετραρισμένο και σε σμικρινση. δε δουλευιει το css.
τι κάνω λάθος στο παρακάτω?

Κώδικας: Επιλογή όλων

print "<td class=\"icon\"><div style=\"width&#58;60px; height&#58;60px; background-position&#58;center; background-repeat&#58;no-repeat; background-size&#58;80px; min-height&#58;60px; height&#58; auto !important; height&#58;60px;
background&#58;url&#40;?thumb=".$this->location->getDir&#40;false, true, false, 0&#41;.$file->getNameEncoded&#40;&#41;."&#41;;\">photo</div> </td>\n";

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

[OXI solved]background width με css?

Δημοσίευση από Sermac » 12 Αύγ 2011 21:31

Δες κι αυτή την προσέγγιση, χωρίς css background αλλά με positions και overflow:hidden.

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
    <head>
        <title>Squared thumbs</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #images a.thumb &#123;
                display&#58;block;
                position&#58;relative;
                width&#58;50px;
                height&#58;50px;
                overflow&#58;hidden;
                float&#58;left;
                margin&#58;0 5px 5px 0;
                border&#58;1px solid #CCC;
                -moz-border-radius&#58;5px;
                -khtml-border-radius&#58;5px;
                -webkit-border-radius&#58;5px;
                border-radius&#58;5px;
            &#125;
            #images a.thumb img &#123;
                position&#58;absolute;
                top&#58;0;
                left&#58;-50%;
                max-height&#58;50px;
            &#125;
        </style>
    </head>
    <body>
        <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
        <br />
        <br />
        <div id="images">
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
        </div>
    </body>
</html>
Το πρόβλημα στο παραπάνω είναι ότι το left:-50% υπολογίζεται σύμφωνα με το πλάτος του parent element, ενώ εμείς θα θέλαμε να υπολογίζεται σύμφωνα με το πλάτος της εικόνας.

Live demo


Μια καλύτερη λύση με jQuery:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
    <head>
        <title>Squared thumbs</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #images a.thumb &#123;
                display&#58;block;
                position&#58;relative;
                width&#58;50px;
                height&#58;50px;
                overflow&#58;hidden;
                float&#58;left;
                margin&#58;0 5px 5px 0;
                border&#58;1px solid #CCC;
                -moz-border-radius&#58;5px;
                -khtml-border-radius&#58;5px;
                -webkit-border-radius&#58;5px;
                border-radius&#58;5px;
            &#125;
            #images a.thumb img &#123;
                position&#58;absolute;
            &#125;
        </style>
        <script type="text/javascript" src="https&#58;//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
           <!--//--><!&#91;CDATA&#91;//><!--
           $&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
               $&#40;'.thumb img'&#41;.each&#40;function&#40;&#41; &#123;
                   var maxWidth = 50;
                   var maxHeight = 50;
                   var imgWidth = $&#40;this&#41;.width&#40;&#41;;
                   var imgHeight = $&#40;this&#41;.height&#40;&#41;;
                   if&#40;imgWidth > imgHeight&#41; &#123;
                       $&#40;this&#41;.css&#40;'max-height', maxHeight&#41;;
                       $&#40;this&#41;.css&#40;&#123;
                           'top'&#58; 0,
                           'left'&#58; -parseInt&#40;&#40;$&#40;this&#41;.width&#40;&#41;/2&#41;&#41;+&#40;maxWidth/2&#41;
                       &#125;&#41;;
                   &#125;
                   else if&#40;imgHeight > imgWidth&#41; &#123;
                       $&#40;this&#41;.css&#40;'max-width', maxWidth&#41;;
                       $&#40;this&#41;.css&#40;&#123;
                           'top'&#58; -parseInt&#40;&#40;$&#40;this&#41;.height&#40;&#41;/2&#41;&#41;+&#40;maxHeight/2&#41;,
                           'left'&#58; 0
                       &#125;&#41;;
                   &#125;
                   else &#123;
                       $&#40;this&#41;.css&#40;&#123;
                           'top'&#58; 0,
                           'left'&#58; 0,
                           'width'&#58; maxWidth,
                           'width'&#58; maxHeight
                       &#125;&#41;;
                   &#125;
               &#125;&#41;;
           &#125;&#41;;
           //--><!&#93;&#93;>
       </script>
    </head>
    <body>
        <div id="images">
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//www.freestuff.gr/images/header/fs_logo.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//d24w6bsrhbeh9d.cloudfront.net/photo/208567_460s.jpg" alt="" />
            </a>
            <a class="thumb" href="#">
                <img src="http&#58;//d24w6bsrhbeh9d.cloudfront.net/photo/208567_460s.jpg" alt="" />
            </a>
        </div>
    </body>
</html>
Live demo
Εικόνα

mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

[OXI solved]background width με css?

Δημοσίευση από mat_ » 04 Οκτ 2011 00:38

Το μυστικό είναι στο overflow, κάνοντάς το hidden δεν εμφανίζει ότι "βγαίνει" από το div. Στην εικόνα βάζεις width ή height.

Κώδικας: Επιλογή όλων

.thumb &#123;
	width&#58;50px;
	height&#58;50px;
	overflow&#58;hidden;
&#125;

Κώδικας: Επιλογή όλων

<div class="thumb">
	<img src="test.jpg" height="50" />
</div>

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες