. Wenn es sich auf der Inhaltsseite befindet, verwenden Sie einfach js, um jedem Bild Attribute hinzuzufügen."/> . Wenn es sich auf der Inhaltsseite befindet, verwenden Sie einfach js, um jedem Bild Attribute hinzuzufügen.">
Heim >Web-Frontend >Bootstrap-Tutorial >So passen Sie Bilder im Bootstrap an den Bildschirm an
So passen Sie Bootstrap-Bilder an den Bildschirm an
Die richtige Einstellung für Bootstrap-responsive Bilder besteht darin, sie hinzuzufügen oben img Gehen Sie einfach zu zwei Kategorien.
<img src="..." class="img-responsive center-block" >
Wenn es sich auf der Inhaltsseite befindet, verwenden Sie einfach js, um jedem Bild Attribute hinzuzufügen.
$(window).load(function(){ $(".panel-body img").addClass("img-responsive center-block"); })
In Bootstrap Version 3 können Bilder ein responsives Layout unterstützen, indem dem Bild die .img-responsive-Klasse hinzugefügt wird. 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.
Wenn Sie das Bild mithilfe der .img-responsive-Klasse horizontal zentrieren müssen, verwenden Sie bitte die .center-block-Klasse anstelle von .text-center.
SVG-Bilder und IE 8-10
In Internet Explorer 8-10 scheinen SVG-Bilder, die auf .img-responsive eingestellt sind, ungleichmäßige Abmessungen zu haben. Um dieses Problem zu lösen, fügen Sie width: 100% 9; an der Stelle hinzu, an der das Problem auftritt. Bootstrap setzt diese Eigenschaft nicht automatisch für alle Bildelemente, da dies dazu führen würde, dass andere Bildformate durcheinander geraten.
Verwandte Empfehlungen: „Bootstrap-Tutorial“
Das obige ist der detaillierte Inhalt vonSo passen Sie Bilder im Bootstrap an den Bildschirm an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!