Astuce Flex vos images

Une raison flagrante pour laquelle de nombreux développeurs ont choisi la largeur fixe plutôt que les sites élastiques est que l'utilisation d'images en ligne peut détruire la présentation d'un site - un peu comme une ruée de bétail qui vous donne des coups de pied à maintes reprises dans l'aine. Ce n'est tout simplement pas amusant. Bien sûr, vous pouvez spécifier leurs largeurs à l'aide de pourcentages ou d'em, mais ces méthodes ne sont pas idéales. Dans de tels cas, pourquoi ne pas utiliser la technique d’arrière-plan?

Étape 1: Configurer le HTML

Commençons par créer un fichier HTML très simple.

 
 
 
 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ullamcorper magna quis velit. Nam vitae dui et massa convallis vulputate. Aliquam ante magna, fermentum nca, scelerisque eget, semper quis, ipsum. Fusce consectetuer enim quis lorem. Turpes morbi élitistes, conséquences, lacinia nca, dignissim ac, velit. Proin mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque au mi ac magna fermentum elementum. 
 

Étape 2: Ajouter le CSS

 #container width: 50%; marge: auto; rembourrage: 1em; arrière-plan: # 3d332a; couleur: # b8ada2; ?  #image height: 300px; fond: url (Girl.jpg) centre sans répétition; 

Pour que notre conteneur div soit flexible, j'ai défini la largeur à 50% de la fenêtre du navigateur. Ensuite, j'ai défini les marges sur auto afin de centrer le contenu. Le rembourrage, l'arrière-plan et la couleur sont simplement esthétiques.

La balise div avec un identifiant "image" est l'endroit où nous allons ajouter l'image d'arrière-plan. La clé ici est que je ne donne pas une largeur spécifique à l'image - seulement la hauteur. Lorsque vous ajoutez l'image en tant qu'arrière-plan, vous devez vous assurer que vous la "centrez" (centre sans répétition). Ceci, en fait, forcera le focus principal de votre image à être affiché à tout moment. * Remarque - Assurez-vous d’utiliser une image dont le point central est au centre..

Vous avez terminé

Affichez votre travail dans un navigateur et essayez d’augmenter et de diminuer la fenêtre du navigateur. Il y a quelques points à garder à l'esprit lors de l'utilisation de cette méthode.

• Veillez à utiliser des images aussi larges que nécessaire..
• Le centre de votre image devrait être le point focal.
• Centrer l'image de fond.
• Envisagez de rendre la largeur maximale de votre conteneur div égale à la largeur totale de l'image..
• En outre, envisagez d’ajouter une largeur minimale pour que votre image ne soit pas trop réduite..

Passe un bon weekend. Rendez-vous ici lundi! Au fait, assurez-vous de nous suivre sur TWITTER!