Afbeeldingen responsive maken met css

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

We gaan een afbeelding plaatsen in de html.

En wel voor het p-element in het main-element.

Je gebruikt hiervoor het img-element.

De route naar de gewenste afbeelding geef je op met src=" ".

Binnen de quotes plaats je de route.

In de map img staan verschillende afbeeldingen.

Ik heb voor elk soort bestandsformaat een afbeelding weggeschreven.

En hiermee kun je experimenteren.

Het html-bestand index.html staat direct in de local root folder.

De afbeeldingen staan in het mapje img.

Dus start je de route naar het bestand met de naam van de afbeeldingenmap img.

Slash om in de map te gaan.

Kies dan één van de aanwezige bestanden.

Ik start met de jpeg van het logo.

Het attribuut alt is altijd verplicht behalve als het om een versiering gaat.

Dan mag je het alt-element leeg laten.

Je moet wel het alt-element altijd typen.

In dit geval geef ik aan dat het hier om een logo van footprint gaat.

Normaliter moet je ook de hoogte en de breedte opgeven.

Dat doe je met de width=" ".

De breedte van de afbeelding is zeshonderd pixels.

En de hoogte, dat geef je op met height="" en die is driehonderd zevenzeventig pixels.

Bewaar het bestand en kijk in d browser.

De afbeelding loopt nu gewoon uit beeld. En is niet responsive.

Als ik het beeld breder maak dan blijft deze op dezelfde grootte.

Dat komt omdat we het formaat van de hoogte en de breedte hard in de html-code hebben gezet.

Dat is dus niet de manier om een afbeelding automatisch met de breedte van het scherm te laten schalen.

Ik verwijder de breedte en de hoogte uit de html-code.

Er verandert echter niets. Op zich is dat logisch want de afbeelding heeft nu eenmaal dit formaat.

Reden dat we dit nogmaals aangeven in de broncode.

Is omdat de browser dan alvast deze ruimte vrijhoudt voor het plaatsen van de afbeelding.

Dit voorkomt dat de teksten gaan verspringen als het laden van de afbeelding wat langer duurt.

Tekst wordt nu eenmaal sneller geladen dan een afbeelding.

Zolang de afbeelding niet binnen is wordt de tekst eerst op de lege plek van de afbeelding geplaatst.

Als ik deze afbeelding responsive wil gaan maken dan gebruiken we daarvoor een css-stijl.

Hiervoor plaats ik eerst een class-naam aan de afbeelding.class=" ".

Je mag hier zelf een naam voor bedenken. Ik noem deze logo.

In het stijlblad zoek je naar de logische plek om hier een stijl voor aan te maken.

Je plaatst css-stijlen over het algemeen in dezelfde volgorde als dat de elementen in de html-broncode staan.

Dus in dit geval na de selector voor main-content.

De selector voor de afbeelding kan dan als volgt zijn...

Eerst het main-element, daar staat immers de afbeelding in.

Een spatie dan de selector img.

Om het html-element img mee aan te spreken.

En deze heeft een class-naam gekregen, daarvoor plaats ik een punt.

En dan de naam van de class en dat is logo.

Dan accolades openen en sluiten en hiertussen plaatsen we dan de eigenschap en de waarde.

De eigenschap die ik wil gaan bepalen is de breedte.

En de waarde zet ik op honderd procent.

De hoogte hoef je niet op te geven.

Deze wordt automatisch proportioneel naar de juist hoogte geschaald.

En de waarde zet ik op honderd procent.

Bewaar de bestanden en bekijk het resultaat in de browser.

Maak opnieuw het beeld smaller.

Je ziet dat honderd procent de volledige breedte van het element is waarin de afbeelding staat.

Dat is het main-element.

De afbeelding loopt niet meer door voorbij andere elementen. Dat is al een hele verbetering.

Er komt een moment dat de layout zich wijzigt van een éénkoloms naar een driekoloms.

We hebben dit css-bestand gemaakt in het vorige hoofdstuk.

De layout is toen responsive opgebouwd met behulp van het grid.

We zijn begonnen met de layout voor mobile, de éénkoloms layout.

Verderop onderaan in het css-bestand staat een mediaquerie.

Waarmee de layout vanaf zeshonderd pixels een driekoloms vormgeving heeft gekregen.

Zodra dit formaat wordt bereikt wil ik dat de afbeelding kleiner wordt.

Dan plaats je binnen deze mediaquerie opnieuw de selector...

Main img. met de class-naam logo.

Ditmaal wil ik dat de breedte naar vijftig procent wordt geschaald.

Bewaar je bestanden en controleer het resultaat in de browser.

Eventueel moet je het beeld nog verversen. Kijk daar is hij.

De afbeelding verandert daadwerkelijk van formaat zodra het scherm groter wordt dan de zeshonderd pixels.

Vanaf zeshonderd pixels mag deze nog maar de helft van de beschikbare ruimte gaan innemen.