Bootstrap global css style picture_html/css_WEB-ITnose

I haven’t updated my blog for a long time. Here I would like to share with you some of the little joys of life. As a programmer, it is very unpleasant to face the computer all day long, and it is common to work overtime, so working continuously is not good for you. The body is very uncomfortable, and as the age increases, the physical condition of programmers will become worse and worse. It is recommended that everyone exercise regularly and stretch the cervical spine and shoulders. When you do, you will find that there are many problems. Cool

(1) Pictures

In Bootstrap version 3, the image 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 to be skewed in size. 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.

The method used is as follows:

<img src="..." class="img-responsive" alt="Responsive image">

图片的形状

By adding the following corresponding classes to the element, the image can be given different shapes.

Cross-browser compatibility

Please keep in mind that Internet Explorer 8 does not support the rounded corners property in CSS3.

<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">

其中img-rounded是以矩形显示图片，img-circle是圆形显示图片，img-thumbnail也是矩形显示图片，但四周跟边框会有空隙。

注：1，一般图片形状的类会与自适应这个类一起使用

 2，在同一个网站下，两张图片显示的效果要一样，需要图片的像素也要一样或者不能相差太多，不然使用了自适应，展示的效果你会发现差好多。

 3，将图片放在栅格系统属性类下面，你会发现图片左右都会有间隙，这时你就要修改它的css属性了，因为它默认是左右都有间隙的。

图片就到这了，希望对大家有帮助