28172 sujets

CSS et mise en forme, CSS3

Ne pas afficher toute l'image

Bonjour,
voilà j'ai une galerie photo sur laquelle je suis en train de retravaillé.
j'ai des photos au format paysage et au format portrait.
je voudrai au lieu d'afficher les image dans leur formats d'origine faire en sorte que l'on affiche qu'un carré de chaque photo.
http://www.photos-vosges.fr/cadre.jpg

comment peut 'on faire ça en css ou autre language sachant que actuellement j'affiche une image de la façon la plus simple. ?
<img src="../images/phototheque/<?php echo $resultat['photoav'] ; ?>" alt="<?php echo $resultat['type'] ; ?>"/>


Merci pour votre aide
Modifié par fabrice88 (25 Sep 2010 - 16:04)
re, bon j'ai trouvé une solution. Je sais pas si c'est la bonne mais j'ai trouvé que sa.

<div class="photogal" style="background-image:url(mini-galerie.php?f='.$result['photoref'].'); background-position:center;"></div>


maintenant le hic c'est que j'aimerai posé un lien sur les images et comme l'image est en background j'ai donc rien pour faire un lien
Bonjour,
Pour répondre à ton premier post:
J'imagine que c'est le script "mini-galerie.php" qui te permet de générer automatiquement une image miniature d'après une image source, donc dans l'idéal il conviendrait de modifier ce script pour qu'il rogne tes miniatures en fonction de leur orientation et ainsi produire une image carré.

Maintenant si tu ne souhaite pas modifier ce script et pour répondre à ton second post tu peux faire ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <style type="text/css" media="screen">
       .photogal {
			display: block;
			background-position:center;
			width:100px;
			height:100px;
       }  
        </style>
    </head>
    <body>
        <a href="" class="photogal" style="background-image:url(mini-galerie.php?f='.$result['photoref'].');"><img src="transparent.gif"></a>
    </body>
</html>

Mais je ne trouve pas ça très élégant.
Pour le lien, il te suffit d'en mettre un dans ta div comme ceci :

<div class="photogal" style="background-image:url(mini-galerie.php?f='.$result['photoref'].'); background-position:center;">

<a href="" title="" style="display:block;width:100%;height:100%"></a>

</div>


Par contre, tu devrais mettre tes styles dans un fichier css et non dans le code html, ça serai plus propre.
Modifié par Tetranima (26 Sep 2010 - 02:03)
ok merci.
j'ai donc créé une image transparente en png pour faire le lien.

C'est vrai que niveau code c'est pas top de mettre le style directement dans la page mais comment faire pour mettre :
style="background-image:url(mini-galerie.php?f='.$result['photoref'].');

dans du CSS ?

C'est possible ? Est -ce utilie et surtout sa va changer quoi ?
Sujet clos
Aller à