Bootstrap image

aims

In this tutorial, we will discuss three class Bootstrap 3 to add style to images. We will also discuss about the Bootstrap 3 responsive image content provided.

General Style

Before we discuss the definition of a special class image style Bootstrap 3 offers, we will see the general style definition images Bootstrap 3 offer.

img {
  border: 0;
}

This is the first image defined CSS rules found in the Bootstrap CSS 3, when rendering the image used to remove border.

Then, in the print media queries, the provisions of these rules.

 img {
	page-break-inside: avoid;
  }
  img {
	! Max-width: 100% important;
  }

page-break-inside: avoid; avoid page breaks within the image.

! max-width: 100% important ; the image defined style is obvious. Even where it is used to determine the width of the image beyond the container, it can also be limited to the container display. It! Important used in conjunction with other styles to cover any damage to this style. Sometimes, developers want the style better support for mobile devices friendly image rendering, will use these two special rules.

There is also another rule for image

img {
  vertical-align: middle;
}

Because of this rule, an image will be centered vertically in the div or other elements. As shown in the following examples.

Please note that if you need to center the image vertically depending on the context, the need for additional styles.

Special style

Bootstrap 3 provides three class image with a clear style for rendering.

img-rounded

You can use this class to render an image with rounded corners. To achieve this, Bootstrap provides img-rounded class. The style class defined as follows

.img-rounded {
  border-radius: 6px;
}

Therefore, it is the border-radius property to 6 with pixel values used to define the relevant image fillet. The following example demonstrates two of the same image, the first image without img-rounded class, the second image with the img-rounded class. Note that the second image is rounded. You can click here to view the online examples .

img-thumbnail

This is another Bootstrap CSS class 3, which add to the image of a thumbnail. The class code is shown below

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
		  transition: all 0.2s ease-in-out;
}

Here is an example of this class of. You can click here to view the online demo .

img-circle

By using the border-radius property, Bootstrap 3 creates a circular image presented. img-circle class CSS code as follows

.img-circle {
  border-radius: 50%;
}

Click here to view the online examples . Below are screenshots and code.

Responsive image

Bootstrap 3 does not provide ready-responsive images. You must add img-responsive class to make it responsive to the image. The class of CSS code below.

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

It defines the images must be displayed as a block-level element, the height of the same image height, the maximum width of the image is 100%, according to the image to limit the device to which it is presented.

To make the image having a default response, you can add the code to the CSS img {}.

Examples of using this class as follows. You can click here to view the online demo .

This added to the image response methods have limitations.

Respectively, in the big screen and mobile devices (smaller screen size may cause performance problems) loaded equally large high-resolution images. Because the browser will be loaded before CSS and JS preloaded images in a low-speed network connections, it can also cause performance problems. Imagine you have a large image and a specific object within it, when you view the images on a mobile device, the image will be reduced to a smaller version of the image will look so small, the problem referred to art direction .

Developers have come up with solutions to overcome these limitations. We will see a Marc Grabanski and Christopher Schmitt Example HiSRC of. This is an image automatically creates a low, medium, high-resolution version of Jquery plug, depending on the version presented by the image display resolution and bandwidth of the device.

Behind us the responsive image tutorial, we will discuss all of these methods in detail.

Click here to view the online demo . Code is as follows: