So machen Sie Bilder mit Bootstrap adaptiv

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!