Suggerimento rapido fletti le tue immagini

Uno dei motivi evidenti per cui molti sviluppatori hanno scelto siti a larghezza fissa rispetto a quelli elastici è perché l'uso di immagini in linea può distruggere il layout di un sito, proprio come un fuggi-fuggi di bestiame che ti colpisce ripetutamente all'inguine. Non è affatto divertente. Certo, puoi specificare la loro larghezza usando percentuali o em, ma quei metodi non sono l'ideale. In tali casi, perché non provare a utilizzare la tecnica di background?

Passaggio 1: imposta l'HTML

Per prima cosa, creiamo un file html molto semplice.

 
 
 
 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ullamcorper magna quis velit. Nam vitae dui et massa convallis vulputate. Aliquam ante magna, fermentum nec, scelerisque eget, semper quis, ipsum. Fusce consectetuer enim quis lorem. Morbi elit turpis, consequat ac, lacinia nec, dignissim ac, velit. Proin mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque a mi ac magna fermentum elementum. 
 

Passaggio 2: Aggiungi il CSS

 #container width: 50%; margine: auto; imbottitura: 1em; sfondo: # 3d332a; colore: # b8ada2; ?  #image height: 300px; background: url (Girl.jpg) centro senza ripetizione; 

Per rendere flessibile il nostro div contenitore, ho impostato la larghezza su 50% della finestra del browser. Successivamente, ho impostato i margini su auto per centrare il contenuto. L'imbottitura, lo sfondo e il colore sono semplicemente uno stile estetico.

Il tag div con un id di "immagine" è dove aggiungeremo l'immagine di sfondo. La chiave qui è che non sto impostando una larghezza specifica per l'immagine - solo l'altezza. Quando aggiungi l'immagine come sfondo, devi assicurarti di "centrarlo" (centro senza ripetizione). Questo, in effetti, costringerà il focus principale della tua immagine a essere sempre visualizzata. * Nota: assicurati di utilizzare un'immagine con il punto focale principale nel mezzo.

Hai finito

Visualizza il tuo lavoro in un browser e prova ad aumentare e diminuire la finestra del browser. Ci sono alcune cose da tenere a mente quando si utilizza questo metodo.

• Assicurati di utilizzare immagini che siano larghe quanto dovranno mai essere.
• Il centro dell'immagine dovrebbe essere il punto focale.
• Centra l'immagine di sfondo.
• Considera di rendere la larghezza massima del contenitore div uguale alla larghezza completa dell'immagine.
• Inoltre, considera l'aggiunta di una larghezza minima per assicurarti che l'immagine non si riduca troppo.

Buon fine settimana. Ci vediamo qui lunedì! A proposito, assicurati di seguirci su TWITTER!