Sfat rapid Flexibilitatea imaginilor

Un motiv evident pentru care mulți dezvoltatori au ales site-uri cu dimensiuni fixe peste zone elastice se datorează faptului că utilizarea imaginilor inline poate distruge aspectul unui site - asemănător unei stampede a bovinelor care vă lovi în mod repetat în zona abdominală. Nu este deloc distractiv. Sigur, puteți specifica lățimile lor folosind procente sau ems, dar aceste metode nu sunt ideale. În astfel de cazuri, de ce să nu încercați să utilizați tehnica de fundal?

Pasul 1: Configurați codul HTML

Mai întâi, să creăm un fișier html foarte simplu.

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

Pasul 2: Adăugați CSS

 #container width: 50%; marja: auto; padding: 1em; fundal: # 3d332a; culoare: # b8ada2; ?  #image height: 300px; fundal: url (Girl.jpg) centru non-repeat; 

Pentru ca containerul nostru div să fie flexibil, am setat lățimea la 50% din fereastra browserului. Apoi, am setat marjele la automat pentru a centra conținutul. Plăcuțele, fundalul și culoarea sunt pur și simplu stilul estetic.

Eticheta div cu un id de "imagine" este locul în care vom adăuga imaginea de fundal. Cheia aici este că nu am stabilit o lățime specifică imaginii - doar înălțimea. Când adăugați imaginea ca fundal, veți dori să vă asigurați că o "centralizați" (centru de repetare). Aceasta, de fapt, va forța focalizarea principală a imaginii dvs. să fie afișată în orice moment. * Notă - Asigurați-vă că utilizați o imagine care are punctul focal principal în mijloc.

Ați terminat

Vizualizați-vă lucrarea într-un browser și încercați să măriți și să micșorați fereastra browserului. Există câteva lucruri de reținut când utilizați această metodă.

• Asigurați-vă că utilizați imagini care sunt la fel de largi ca oricând vor fi.
• Centrul imaginii dvs. ar trebui să fie punctul focal.
• Centrarea imaginii de fundal.
• Luați în considerare ca lățimea maximă a containerului dvs. div să fie egală cu lățimea totală a imaginii.
• În plus, vă recomandăm să adăugați o lățime minimă pentru a vă asigura că imaginea dvs. nu se micșorează prea mult.

Sa ai un weekend frumos. Să ne întîlnim aici luni! Apropo, asigurați-vă că ne urmați pe TWITTER!