Snelle tip flex uw afbeeldingen

Een opvallende reden waarom veel ontwikkelaars gekozen hebben voor vaste breedte over elastische sites is omdat het gebruik van inline afbeeldingen de lay-out van een site kan vernietigen - net als een stormloop vee dat je herhaaldelijk in de lies schopt. Het is gewoon helemaal niet leuk. Natuurlijk kun je hun breedte opgeven met percentages of ems, maar deze methoden zijn niet ideaal. Probeer in dergelijke gevallen de achtergrondtechniek te gebruiken?

Stap 1: de HTML instellen

Laten we eerst een heel eenvoudig html-bestand maken.

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

Stap 2: voeg de CSS toe

 #container width: 50%; marge: automatisch; opvulling: 1em; achtergrond: # 3d332a; kleur: # b8ada2; ?  #image height: 300px; achtergrond: url (Girl.jpg) no-repeat center; 

Om ervoor te zorgen dat onze container-div flexibel is, heb ik de breedte ingesteld op 50% van het browservenster. Vervolgens heb ik de marges automatisch ingesteld om de inhoud te centreren. De opvulling, achtergrond en kleur zijn eenvoudigweg esthetische styling.

De div-tag met een id van "afbeelding" is de plaats waar we de achtergrondafbeelding zullen toevoegen. De sleutel hier is dat ik geen specifieke breedte instel voor het beeld - alleen de hoogte. Wanneer u de afbeelding als achtergrond toevoegt, moet u ervoor zorgen dat u deze centreert (geen-herhalend centrum). Dit zorgt er in feite voor dat de hoofdfocus van uw afbeelding te allen tijde wordt weergegeven. * Opmerking - Zorg ervoor dat u een afbeelding gebruikt met het hoofdbrandpunt in het midden.

U bent klaar

Bekijk uw werk in een browser en probeer het browservenster te vergroten of verkleinen. Er zijn een paar dingen waar u op moet letten bij het gebruik van deze methode.

• Zorg ervoor dat u afbeeldingen gebruikt die zo breed zijn als ze ooit moeten zijn.
• Het midden van je afbeelding moet het middelpunt zijn.
• Centreer de achtergrondafbeelding.
• Overweeg de maximale breedte van uw container-div te maken die gelijk is aan de volledige breedte van de afbeelding.
• Overweeg ook om een ​​minimale breedte toe te voegen om ervoor te zorgen dat uw afbeelding niet te veel krimpt.

Fijn weekend. Laten we elkaar hier maandag ontmoeten! Trouwens, volg ons op TWITTER!