Adapter un bloc à la largeur de l'image qu'il contient

Magazine
Marque
SysOps Pratique
Numéro
57
Mois de parution
janvier 2010
Spécialité(s)


Résumé

Dans l'article suivant, nous allons voir comment insérer une image au sein d'une page web, en faisant en sorte que le bloc qui la contient s'adapte à sa largeur. En outre, notre image est accompagnée de sa légende et celle-ci ne devra jamais dépasser la largeur de l'image. Certains d'entre vous pensent peut-être déjà à fixer la largeur du bloc, tout simplement, et de n'utiliser que des images d'une certaine largeur... Mais nous allons voir ici qu'il est possible de créer quelque chose de beaucoup plus souple, de façon très simple.


1. La solution : un rendu de type tableau

En effet, une cellule de tableau a la capacité de s'adapter à son contenu. Autrement dit, si l'on fixe la largeur d'une cellule et que le contenu ne peut s'adapter à cette largeur (en allant à la ligne), la cellule va s'adapter au contenu le plus long (image, bloc de largeur fixe, etc.). C'est cette propriété que nous allons mettre en œuvre ici. Nous allons insérer notre image dans un conteneur de largeur fixée et celui-ci va s'adapter à la largeur de l'image si nous sommes amenés à utiliser une image plus grande. Pour cela, nous allons utiliser la propriété…

La suite est réservée aux abonnés. Il vous reste 90% à découvrir.
  • Accédez à tous les contenus de Connect en illimité
  • Découvrez des listes de lecture et des contenus Premium
  • Consultez les nouveaux articles en avant-première
Envie de lire la suite ? Rejoignez Connect
Je m'abonne maintenant


Article rédigé par

Par le(s) même(s) auteur(s)

Sécurisez vos échanges grâce à GnuPG !

Magazine
Marque
SysOps Pratique
Numéro
86
Mois de parution
novembre 2014
Spécialité(s)
Résumé
GnuPG (ou GPG) est une implémentation libre du standard OpenPGP, un format développé par l'Internet Engineering Task Force (IETF), initialement conçu pour le chiffrement et l'authentification des courriers électroniques. Quelques commandes à connaître, et vous pouvez être certain que vos e-mails ne pourront être lus par une personne autre que leurs destinataires.

Android « L » : un design épuré, un moteur plus performant, des données protégées

Magazine
Marque
SysOps Pratique
Numéro
86
Mois de parution
novembre 2014
Spécialité(s)
Résumé
Disponible en version bêta pour certains appareils Google depuis le mois de juin, la sortie du système Android « L » est aujourd'hui imminente. Toutefois, on ne connaît pas encore son mystérieux nom de code (« Lollipop » est, selon la rumeur, le nom pressenti pour cette version...), ni son numéro de version. Cela ne nous empêche pas de nous pencher d'ores et déjà sur les nouvelles fonctionnalités à venir...

OpenStreetMap, la carte dont vous êtes le héros !

Magazine
Marque
SysOps Pratique
Numéro
86
Mois de parution
novembre 2014
Spécialité(s)
Résumé
Le projet a fêté ses 10 ans d'existence au mois d'août. C'est LE projet de référence en matière de données géographiques libres. D'ailleurs, il fait partie des « producteurs de données » sur data.gouv.fr depuis presque un an déjà. Retour sur un projet d'envergure mondiale, auquel vous aussi vous pouvez contribuer !

Les listes de lecture

Python niveau débutant

9 article(s) - ajoutée le 01/07/2020
Vous désirez apprendre le langage Python, mais ne savez pas trop par où commencer ? Cette liste de lecture vous permettra de faire vos premiers pas en découvrant l'écosystème de Python et en écrivant de petits scripts.

Au pays des algorithmes

11 article(s) - ajoutée le 01/07/2020
La base de tout programme effectuant une tâche un tant soit peu complexe est un algorithme, une méthode permettant de manipuler des données pour obtenir un résultat attendu. Dans cette liste, vous pourrez découvrir quelques spécimens d'algorithmes.

Analyse de données en Python

10 article(s) - ajoutée le 01/07/2020
À quoi bon se targuer de posséder des pétaoctets de données si l'on est incapable d'analyser ces dernières ? Cette liste vous aidera à "faire parler" vos données.
Plus de listes de lecture