Discussion :

[stc074]

Bonjour, sur un site j'ai des screenshots avec un cadre blanc faisant parti de l'image, j'aimerais le supprimer en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

            <div class="cellRight"><img class="clip" src="GFX/stniccc2015_codef.png" alt="" /></div>

Le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.cellRight {
    position: relative;
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    padding: 5px;
    overflow: hidden;
}
 
.clip {
    position: absolute;
    clip: rect(1px, 187px, 1px, 249px);
    width: 200px;
    height: auto;
}

la taille d'origine des screenshots est de 250x188 redimensionné en 200 de largeur sur la page, le cadre fait un pixel d'epaisseur, mais avec mon code le screenshot disparaît, je ne suis pas un habitué de la propriété clip, je ne vois pas ou est mon erreur.
Merci.

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clip: rect( haut, droite, bas, gauche);

[W3.org] Clipping: the 'clip' property

[stc074]

ah ok je vais essayer ça, je suis tombé sur un tuto qui donnait de mauvaises information apparemment.
Merci.

[Candygirl]

Hello,

Si tu ne veux pas t'embêter avec clip et les éventuels désagréments qu'impliquent un positionnement absolu, tu peux jouer avec les marges négatives et un overflow:hidden

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div {
    overflow:hidden;
    display:inline-block;
}
 
img {
    margin:-1px;
    width:200px;
}

[stc074]

Merci CandyGirl, je vais essayer ta solution car chez moi le clip ne fonctionne pas.

[Candygirl]

Il n'y a pas de raison que le clip ne fonctionne pas chez toi.
Dans ton premier code, il y a deux erreurs:

1) les valeurs de ton clip ne sont pas appliquées correctement. Si tu suis la doc fournie par NoSmoking tu aurais dû écrire quelque chose comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

clip: rect(1px, 199px, 149px, 1px);

2) Tu appliques un overflow:hidden à un élément qui ne voit aucun contenu pour constituer sa taille puisque la seule image qu'il contient est positionnée en absolut. Donc, à moins de lui donner une taille, tu ne verras pas grand chose dans les 10x10px de padding...