YouTip

In this tutorial, we will discuss three Bootstrap 3 classes to style images. We will also discuss what Bootstrap 3 provides for responsive images. Before we discuss the special classes Bootstrap 3 provides for defining image styles, we will look at the general styles Bootstrap 3 provides for defining images. img { border: 0;} This is the first CSS rule for images found in Bootstrap 3's CSS, used to remove the border when images are rendered. Then, within a print media query, these rules are specified. img {page-break-inside: avoid; } img {max-width: 100% !important; } _page-break-inside: avoid;_ prevents page breaks inside images. _max-width: 100% !important;_ The style defined for images is self-explanatory. Here it is used to ensure that even if the image's width exceeds the container, it will be constrained to display within the container. It is used with _!important_ to override any other styles that might break this styling. Sometimes, developers use these two rules specifically to better support friendly image rendering on mobile devices. Here is another rule for images img { vertical-align: middle;} Due to this rule, an image will be vertically centered within a div or other element. As shown in the example below. ## Example body { padding: 50px } .mdl { background-color: silver; padding: 7px }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

[Click here, view the demo online](#) Please note that if you need to vertically center an image based on context, additional styling is required. Bootstrap 3 provides three classes for presenting images with specific styles. ### img-rounded You can use this class to present an image with rounded corners. To achieve this, Bootstrap provides the _img-rounded_ class. The style for this class is defined as follows .img-rounded { border-radius: 6px;} So, it sets the _border-radius_ property to a value of 6 pixels to define the rounded corners for the relevant image. The following example demonstrates two identical images, the first without the _img-rounded_ class, and the second with the _img-rounded_ class. Please note that the second image has rounded corners. You can [click here, view the example online](#).  ## Example body { padding: 50px } ### img-thumbnail This is another Bootstrap 3 CSS class that adds a thumbnail effect to an image. The code for this class 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 using this class. You can [click here, view the online demo](#).  ## Example body { padding: 50px } ### img-circle By using the border-radius property, Bootstrap 3 creates an image presented in a circle. The CSS code for the _img-circle_ class is as follows .img-circle { border-radius: 50%;} [Click here, view the example online](#). Below is the screenshot and code.  ## Example body { padding: 50px } _Bootstrap 3 does not provide ready-made responsive images_. You must add the _img-responsive_ class to an image to make it responsive. The CSS code for this class is as follows. .img-responsive { display: block; height: auto; max-width: 100%;} It defines that the image must display as a block-level element, the height will be the same as the image height, and the image's maximum width is 100% to constrain the image to render based on the device it is on. To make images responsive by default, you can add this CSS code to _img{ }_. An example using this class is as follows. You can [click here, view the demo online](#). ## Example body { padding: 50px } img { margin-bottom:30px } This method of adding responsiveness to images has limitations. Loading the same large, high-resolution image on both large-screen devices and mobile devices (with smaller screen sizes, which may cause _performance issues_). Since browsers preload images before CSS and JS load, this can also cause performance issues on a slow network connection. Imagine you have a large image with a specific object inside it. When you view the image on a mobile device, the image is scaled down to a smaller version, making the image appear very small, a problem known as _art direction_. Developers have come up with solutions to overcome these limitations. We will look at an example using _HiSRC_ by (https://twitter.com/1marc) and (https://twitter.com/teleject). This is a jQuery plugin that automatically creates low, medium, and high-resolution versions of an image, presenting the version based on the resolution and bandwidth of the device displaying the image. In our later _Responsive Images Tutorial_, we will discuss all these methods in detail. [Click here, view the demo online](#). The code is as follows: ## Example body { padding: 50px } img { margin-bottom:30px } $(document).ready(function(){ $(".hisrc").hisrc(); });

Photo courtesy: /http://www.flickr.com/photos/cubagallery/