Et responsivt nettsted kan tilpasse skjermstørrelsen og enhetsdimensjonene den vises i. Sammen med nettsidens respons, er det også nødvendig at bildene og teksten er justert og responsive. Justerte bilder er de som vikler tekst rundt dem. Mens justert tekst er den som ser ut som et helt avsnitt.
Denne artikkelen vil se på metoden for å justere bilder og tekst responsivt.
Hvordan justere bilder og tekst responsivt?
Innholdet inkludert bilder og tekst kan justeres responsivt ved å bruke Bootstrap. For å gi demonstrasjonen har vi listet opp to eksempler:
Eksempel 1: Sentrér teksten vertikalt og bildet horisontalt
Prøv først å sentrere bildet horisontalt og teksten vertikalt. Følg instruksjonene nedenfor for det formålet:
Trinn 1: Lag en HTML-struktur
Når du oppretter en HTML-struktur, kobler du først ' Støvelhempe ” og også den eksterne CSS-filen. Etter det oppretter du en Trinn 2: Bruk CSS På container: På På tekst: Det kan observeres at teksten er vertikalt sentrert, og bildet er horisontalt sentrert: Eksempel 2: Venstrejuster teksten og det responsive bildet I dette gitte eksemplet vil bildet og teksten være venstrejustert. For det formålet, gå gjennom trinnvise instruksjoner nedenfor: Trinn 1: Lag en HTML-struktur HTML-koden er den samme som ovenfor, brukt i eksempelet. Trinn 2: Bruk CSS På container: På På tekst: Utdataene bekrefter at teksten og bildet er venstrejustert: For å justere bilder og tekst responsivt, lag først et rutenett eller flex layout i CSS, og sett deretter ' juster-element ' eiendomsverdi til ' senter '. Dette vil justere bilder og tekst responsivt i CSS. Denne oppskriften har gitt brukerne en komplett guide for å justere bilder og tekst responsivt. tag og tekst:
< kropp >
< div klasse = 'container' >
< img src = 'test-image.jpg' alt = 'test bilde' >
< div klasse = 'tekst' > Dette er litt tekst. div >
div >
kropp >
:
.container {
vise: bøye seg ;
tekst-align: center;
rettferdiggjøre-innhold: senter;
align-items: center;
}
img {
maks-bredde: 100 % ;
høyde: auto;
}
.tekst {
skriftstørrelse: 16px;
maks-bredde: 390px;
}
:
.container {
vise: bøye seg ;
flex-retning: kolonne;
align-items: flex-start;
tekstjustering: venstre;
}
img {
maks-bredde: 100 % ;
høyde: auto;
}
.tekst {
skriftstørrelse: 16px;
maks-bredde: 390px;
}
Konklusjon