En responsiv webbplats kan anpassa skärmstorleken och enhetsdimensionerna där den visas. Tillsammans med webbplatsens lyhördhet är det också nödvändigt att bilder och text är anpassade och responsiva. Justerade bilder är de som lindar text runt dem. Medan justerad text är den som ser ut som ett helt stycke.
Den här artikeln kommer att titta på metoden för att anpassa bilder och text responsivt.
Hur justerar jag bilder och text responsivt?
Innehållet inklusive bilder och text kan anpassas responsivt genom att använda Bootstrap. För att ge demonstrationen har vi listat två exempel:
Exempel 1: Centrera texten vertikalt och bilden horisontellt
Försök först att centrera bilden horisontellt och texten vertikalt. För detta ändamål, följ instruktionerna nedan:
Steg 1: Skapa en HTML-struktur
När du skapar en HTML-struktur, länka först ' Bootstrap ” och även den externa CSS-filen. Efter det skapar du en Steg 2: Använd CSS På container: På På text: Det kan observeras att texten är vertikalt centrerad och bilden är horisontellt centrerad: Exempel 2: Vänsterjustera texten och den responsiva bilden I det här givna exemplet kommer bilden och texten att vara vänsterjusterade. För detta ändamål, gå igenom nedanstående stegvisa instruktioner: Steg 1: Skapa en HTML-struktur HTML-koden är densamma som ovan, använd i exemplet. Steg 2: Använd CSS På container: På På text: Utdata bekräftar att texten och bilden är vänsterjusterade: För att anpassa bilder och text responsivt skapar du först ett rutnät eller en flexibel layout i CSS och ställer sedan in ' align-objekt ' egenskapsvärde till ' Centrum ”. Om du gör det kommer bilder och text att anpassas responsivt i CSS. Den här texten har gett användarna en komplett guide för att anpassa bilder och text responsivt. tagg och text:
< kropp >
< div klass = 'behållare' >
< img src = 'test-image.jpg' allt = 'testbild' >
< div klass = 'text' > Det här är lite text. div >
div >
kropp >
:
.behållare {
visa: böja ;
text-align: center;
motivera-innehåll: center;
align-items: center;
}
img {
maximal bredd: 100 % ;
höjd: auto;
}
.text {
teckenstorlek: 16px;
max-bredd: 390px;
}
:
.behållare {
visa: böja ;
flex-riktning: kolumn;
align-items: flex-start;
text-align: vänster;
}
img {
maximal bredd: 100 % ;
höjd: auto;
}
.text {
teckenstorlek: 16px;
max-bredd: 390px;
}
Slutsats