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.
Examples
<Html>
<Head>
<Title> Bootstrap 3 rendered image Examples </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
.mdl {
background-color: silver;
padding: 7px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<P class = "mdl"> <img src = "icon-default-screenshot.png"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </ P>
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Click here to view the online demo
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 .
![images with and without rounded corners](/bootstrap/image-rounded-corners-screenshot.png)
Examples
<Html>
<Head>
<Title> Bootstrap 3 rounded corners rendered image Examples </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "rounded-corner-images.png" alt = "image with rounded corners">
<Img src = "rounded-corner-images.png" alt = "image with rounded corners" class = "img-rounded">
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
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 .
![two images without and with img-thumbnail](/bootstrap/image-with-thumbnail-screenshot.png)
Examples
<Html>
<Head>
<Title> Bootstrap 3 thumbnail </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-thumbnail.png" alt = "image without thumbnail corners">
<Img src = "image-with-thumbnail.png" alt = "image with thumbnail corners" class = "img-thumbnail">
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
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.
![image without and with img-circle](/bootstrap/image-with-circle-screenshot.png)
Examples
<Html>
<Head>
<Title> Bootstrap 3 circular image </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-circle.png" alt = "image without circle shape">
<Img src = "image-with-circle.png" alt = "image with circle shape" class = "img-circle">
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
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 .
Examples
<Html>
<Head>
<Title> Bootstrap 3 Responsive image </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
img {
margin-bottom: 30px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-circle.png" alt = "without responsive image feature">
<Img src = "image-with-circle.png" alt = "with responsive image feature" class = "img-responsive">
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
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:
Examples
<Html>
<Head>
<Title> Bootstrap 3 responsive image using HiSRC of instances </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Style>
body {
padding: 50px
}
img {
margin-bottom: 30px
}
</ Style>
<-! HTML5 Shim and Respond. js IE8 support HTML5 original and media inquiries. ->
<- WARNING:! Respond. If via file: // See page js will not work. ->
<-! [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "5216852563_eca0af1b0d_m.jpg" data-1x = "5216852563_eca0af1b0d.jpg" data-2x = "5216852563_90c3f9c402_o.jpg" class = "hisrc" />
<-! JQuery (a JavaScript plugin for Bootstrap is necessary --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Include all of the compiled plug-in (see below), or if necessary, include a single file ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
<Script>
$ (Document) .ready (function () {
$ ( ". Hisrc") hisrc ().;
});
</ Script>
<P> Photo courtesy: /http://www.flickr.com/photos/cubagallery/ </ p>
</ Body>
</ Html>