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  class="img-responsive center-block lazy"  src="/static/imghwm/default1.png"  data-src="..."     alt="So passen Sie Bilder im Bootstrap an den Bildschirm an" >

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!