Heim >Web-Frontend >Bootstrap-Tutorial >So machen Sie Bilder mit Bootstrap adaptiv
So machen Sie Bilder mit Bootstrap adaptiv
- 尚Original
- 2019-07-11 15:38:484334Durchsuche
Wie Bootstrap Bilder adaptiv macht:
1. Wenn Sie ein Bild auf der Seite einfügen, fügen Sie einfach class="img-responsive" hinzu
< img src="..." class="img-responsive center-block" >
2. Wenn es sich auf der Inhaltsseite befindet, verwenden Sie einfach js, um jedem Bild Attribute hinzuzufügen.
$(".setting img").addClass("img-responsive center-block"); //center-block Das Bild ist horizontal zentriert
In Bootstrap Version 3, indem Das Bild Durch Hinzufügen der .img-responsive-Klasse können Bilder ein responsives Layout unterstützen. Das Wesentliche besteht darin, die Attribute max-width: 100%;, height: auto; und display: block; für das Bild festzulegen, damit das Bild in seinem übergeordneten Element besser skaliert werden kann.
Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial.
Das obige ist der detaillierte Inhalt vonSo machen Sie Bilder mit Bootstrap adaptiv. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!