Een responsieve afbeelding is een afbeelding die zichzelf kan aanpassen aan verschillende apparaten, ongeacht de schermgroottes. Het hebben van een responsieve afbeelding op de website is tegenwoordig zo cruciaal geworden. Omdat het niet alleen de website versnelt, maar ook een coole gebruikerservaring biedt op alle apparaten. Responsieve afbeeldingen worden ook vergroot of verkleind door het formaat van de browser.
Responsieve afbeeldingen passen zich efficiënt aan verschillende schermformaten op verschillende apparaten aan. Het zorgt ervoor dat de kwaliteit behouden blijft. Een responsieve website met responsieve afbeeldingen verhoogt zeker de betrokkenheid en conversiepercentages. Afbeeldingen kunnen responsief worden gemaakt met behulp van CSS en mediaquery's.
Dit artikel maakt gebruik van HTML en CSS om de afbeeldingen responsief te maken.
Hoe maak je afbeeldingen responsief met HTML en CSS?
Om afbeeldingen responsief te maken met HTML en CSS, doorloopt u de onderstaande stappen:
Methode 1: Gebruik de eigenschap “max-width”.
De eerste methode om een afbeelding responsief te maken is door gebruik te maken van de “ Maximale wijdte ' eigendom. De ' Maximale wijdte ”-eigenschap wordt gebruikt om de maximale breedte van de afbeelding te definiëren. Als de inhoud de maximale breedte overschrijdt, verandert de hoogte van het element.
HTML maken
Om een afbeeldingsbestand toe te voegen aan de HTML-tag
moeten gebruikers de tagCSS toevoegen
Maak nu een extern CSS-bestand en sla het op met de extensie “. css ”-bestandsextensie en koppel deze binnen de
-tag van het HTML-bestand. Om het afbeeldingsbestand in het CSS-bestand op te maken, begint u met de img-tag en opent u de accolades. Voeg vervolgens binnen de accolade de “ maximale breedte: 100% ;” om de afbeelding horizontaal in de container te passen. Bovendien voorkomt het dat afbeeldingen worden afgesneden. Voeg daarna “ hoogte: automatisch ;” om de hoogte automatisch aan te passen, zodat de afbeelding correct wordt weergegeven:afb {
Maximale wijdte : 100% ;
hoogte : auto ;
}
Pas het formaat van het browservenster aan om te controleren hoe de afbeelding wordt geschaald.
Methode 2: Gebruik de eigenschap “width”.
Een andere methode om een afbeelding responsief te maken is door gebruik te maken van de eigenschap “ breedte ”. Het eigendom ' breedte ” definieert de breedte voor de afbeeldingen en tekst. Het bevat geen marges, opvulling of randen. Het kan de grootte van afbeeldingen en tekst instellen in de vorm cm, px of%. Om een afbeelding responsief te maken, wijst u eenvoudigweg de “ breedte “eigenschap naar” 100 %”. Instelling “ breedte: 100% ;” betekent dat de afbeelding zo groot wordt gemaakt als het bovenliggende element:
afb {breedte : 100% ;
hoogte : auto ; }
Het bovenstaande bevestigt dat de afbeelding responsief is. Om te controleren of het reageert of niet, wijzigt u eenvoudigweg het formaat van het browservenster.
Methode 3: Mediaquery's toepassen
CSS-mediaquery's helpen gebruikers het uiterlijk van een webpagina te wijzigen. CSS-mediaquery bevat voorwaarden. Wanneer aan deze voorwaarden wordt voldaan, zal dit het uiterlijk van het apparaat of de browser veranderen. Mediaquery's kunnen de gebruikers ook helpen bij het responsief maken van afbeeldingen. Geef daarom eerst de “@ media '-tag en geef vervolgens de ' Maximale wijdte ” en wijs de maximale breedte toe voor een afbeelding binnen de accolades. Wanneer aan deze voorwaarde wordt voldaan, reageert de afbeelding. Voeg daarna de accolades toe, specificeer de img-tag en specificeer de “ breedte: 100% ;” waarde:
@media ( Maximale wijdte : 480px ) {afb {
breedte : 100% ;
}
}
Opmerking : de afbeelding reageert alleen als deze aan de opgegeven voorwaarde voldoet.
De CSS-mediaquery is toegepast en nu gedraagt de afbeelding zich als responsief als deze wordt aangepast aan de opgegeven afbeeldingsgrootte. Anders reageert het niet:
Conclusie
Om afbeeldingen responsief te maken met HTML en CSS, hebben gebruikers verschillende methoden. Deze methoden omvatten onder meer het responsief maken van afbeeldingen met behulp van “ Maximale wijdte ' eigendom, ' breedte ”-eigenschap, en ook door de CSS-mediaquery toe te passen. Dit artikel heeft de gebruikers de complete oplossing gepresenteerd om afbeeldingen responsief te maken.