Et responsivt websted kan tilpasse skærmstørrelsen og enhedsdimensioner, hvor det bliver vist. Sammen med hjemmesidens responsivitet er det også nødvendigt, at billeder og tekst er tilpasset og responsive. Justerede billeder er dem, der vikler tekst omkring dem. Mens justeret tekst er den, der ligner et helt afsnit.
Denne artikel vil se på metoden til at justere billeder og tekst responsivt.
Hvordan justerer man billeder og tekst responsivt?
Indholdet inklusive billeder og tekst kan justeres responsivt ved at bruge Bootstrap. For at give demonstrationen har vi listet to eksempler:
Eksempel 1: Centrer teksten lodret og billedet vandret
Prøv først at centrere billedet vandret og teksten lodret. Til det formål skal du følge instruktionerne nedenfor:
Trin 1: Opret en HTML-struktur
Mens du opretter en HTML-struktur, skal du først linke ' Bootstrap ” og også den eksterne CSS-fil. Derefter skal du oprette en Trin 2: Anvend CSS På container: På På tekst: Det kan ses, at teksten er lodret centreret, og billedet er centreret vandret: Eksempel 2: Venstrejuster teksten og det responsive billede I dette givne eksempel vil billedet og teksten være venstrejusteret. Til det formål skal du gennemgå nedenstående trinvise instruktioner: Trin 1: Opret en HTML-struktur HTML-koden er den samme som ovenfor, brugt i eksemplet. Trin 2: Anvend CSS På container: På På tekst: Outputtet bekræfter, at teksten og billedet er venstrejusteret: For at justere billeder og tekst responsivt skal du først oprette et gitter eller et fleksibelt layout i CSS og derefter indstille ' align-emne ' ejendomsværdi til ' centrum ”. Hvis du gør det, justeres billeder og tekst responsivt i CSS. Denne skrive-up har givet brugerne en komplet guide til at justere billeder og tekst responsivt. tag og tekst:
< legeme >
< div klasse = 'beholder' >
< img src = 'test-image.jpg' alt = 'test billede' >
< div klasse = 'tekst' > Dette er noget tekst. div >
div >
legeme >
:
.beholder {
Skærm: bøje ;
tekst-align: center;
retfærdiggøre-indhold: center;
align-items: center;
}
img {
max-bredde: 100 % ;
højde: auto;
}
.tekst {
skriftstørrelse: 16px;
max-bredde: 390px;
}
:
.beholder {
Skærm: bøje ;
flex-retning: kolonne;
align-items: flex-start;
tekst-align: venstre;
}
img {
max-bredde: 100 % ;
højde: auto;
}
.tekst {
skriftstørrelse: 16px;
max-bredde: 390px;
}
Konklusion