Bootstrap-images of global css styles,

Bootstrap-images of global css styles,

I haven't updated my blog for a long time. I would like to share with you the little fun of life. As a programmer, It is very uncomfortable to work on computers all day long. Overtime is also common, so continuous work is not good for the body, and with the increase of age, the programmer's health will be getting worse and worse, or we suggest you exercise regularly, stretch the lower cervical spine and shoulder, when you go, you will find it great

(1) images

In Bootstrap version 3, add.img-responsiveClass allows images to support responsive layout. The essence is to set the imagemax-width: 100%;,height: auto;Anddisplay: block;So that the image can be scaled in its parent element.

If you want to use.img-responsiveClass image horizontal center, please use.center-blockClass, do not use.text-center.

SVG images and IE 8-10

In Internet Explorer 8-10, set.img-responsiveThe SVG image is not balanced. To solve this problem, addwidth: 100% \9;You can. Bootstrap does not automatically set this attribute for all image elements, as this will lead to confusion in other image formats.

The method is as follows:

Image shape

PassAdd the following classes to the element to make the image show different shapes.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 does not support the rounded corner attribute in CSS3.

Here, img-rounded is a rectangular display image, img-circle is a circular display image, and img-thumbnail is also a rectangular display image, but there is a gap between the four sides and the border.

Note: 1. Generally, image shape classes are used together with adaptive classes.

2. on the same website, the two images have the same display effect. The pixels of the images must be the same or the differences must not be too large. Otherwise, self-adaptation is used, you will find a lot worse.

3. Place the image under the raster system attribute class and you will find that there is a gap between the left and right sides of the image. Then you need to modify its css attribute because it has a gap between the left and right by default.

The image is here, and I hope it will help you.