How to make images adapt to the screen in bootstrap

How does bootstrap make images adapt to the screen

The correct setting for bootstrap responsive images is to add them above img Just go to two categories.

<img src="..." class="img-responsive center-block" >

If it is in the content page, just use js to add attributes to each img.

$(window).load(function(){
 
    $(".panel-body img").addClass("img-responsive center-block");
 
})

In Bootstrap version 3, images can support responsive layout by adding the .img-responsive class to the image. The essence is to set the max-width: 100%;, height: auto; and display: block; attributes for the image, so that the image can be better scaled in its parent element.

If you need to center the image using the .img-responsive class horizontally, please use the .center-block class instead of .text-center.

SVG Images and IE 8-10

In Internet Explorer 8-10, SVG images set to .img-responsive appear unevenly sized. To solve this problem, add width: 100% \9; where the problem occurs. Bootstrap does not automatically set this property for all image elements, as this would cause other image formats to mess up.

Related recommendations: "bootstrap tutorial"

The above is the detailed content of How to make images adapt to the screen in bootstrap. For more information, please follow other related articles on the PHP Chinese website!