Je veux étirer une image dans ma cellule TD. Comment faire ça. C'est une image à tabulation qui ressemble à une invertie de ce | ________ |. J'ai besoin de placer l'image dans la première cellule TD qui contient le texte 'AAA' viendra au centre de cette image.
5 Réponses :
Habituellement, vous faites cela comme une image d'arrière-plan, spécialement lorsque vous avez des bords courbes.
Votre HTML pourrait ressembler à quelque chose comme ceci: et le CSS:
Si la table est une taille fixe et que vous connaissez la taille de l'image, vous pouvez appliquer l'image à l'aide de CSS.
td.tab {
background: url(images/tab.jpg) no-repeat;
height: 50px;
width: 200px;
}
Si vous voulez vraiment étirer votre image, faites simplement la largeur = "100%" et définissez la hauteur égale à la hauteur réelle de votre image.
Mais vraiment, vous devez utiliser une technique de portes coulissantes http://www.alistapart.com/articles/slidgedoors/ avec des images de fond CSS et une balise supplémentaire;
Je suggérerais d'envelopper votre AAA en une portée et d'utiliser à la fois le TD et la traverse à la place du LI et A dans les portes coulissantes Article P>
<td style="background: transparent url('images/tab-left.gif') left top no-repeat">
<span style="background: transparent url('images/tab-right.gif') right top no-repeat; margin-left: 10px">aaa</style>
</td>
Les portes coulissantes ne seront pas nécessaires avec des tailles fixes, cependant ... mais il est bon de mentionner (:
Merci, votre solution m'a aidé à comprendre comment étirer la TD verticalement.
La vieille école scolaire de le faire à l'aide de cellules de table est comme celle-ci. Ce qui se passe est que vous coupez votre image de tabulation en trois parties. La gauche qui comprend la courbe gauche. Le milieu qui comprend une bande verticale prise dans une partie de la languette qui n'a aucune courbe, et la droite qui comprend la courbe droite.
Vous ne pouvez pas étirer une image d'arrière-plan sans utiliser CSS3.
dans css3 vous avez taille de fond propriété pour laquelle vous pouvez donner 100% pour étirer l'image à 100% du conteneur. Mais CSS3 n'est pas pris en charge dans tous les navigateurs.
Vous pouvez utiliser une étiquette d'image et donner la largeur et la hauteur à 100% pour y parvenir.