Home > Others

Bootstrap Precautions (vii) Photos

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In this chapter, we will learn Bootstrap support for images. Bootstrap provides three classes that can apply a simple style to a picture:

. img-rounded: Add a border-radius:6px to get a picture fillet.

. img-circle: Add border-radius:500px to turn the entire picture into a circle.

. Img-thumbnail: Add some padding (padding) and a gray border.

<! DOCTYPE html>
<link rel= "stylesheet" href= "/stylesheets/bootstrap.min.css" >
<body>



</body>

Responsive Picture

In Bootstrap version 3, by adding a. Img-responsive class to a picture, you can make the picture support a responsive layout . Its essence is to set the max-width:100% for the picture , Height:auto; and Display:block; property, which allows the picture to be scaled better in its parent element.

If you need to center the picture horizontally using the. Img-responsive class, use the . Center-block class, and do not use. Text-center.

SVG Images and IE 8-10

In Internet Explorer 8-10 , SVG images that are set to. img-responsive are not symmetrical in size. In order to solve this problem, add width:100% \9in the wrong place; Can. Bootstrap does not automatically set this property for all image elements because it causes other image formats to become garbled.

Picture shape

You can make a picture appear in a different shape by adding the following appropriate class for the element.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 does not support fillet properties in CSS3.

class Description
. img-rounded Add rounded corners to pictures (IE8 not supported)
. img-circle Turn a picture into a circle (IE8 not supported)
. img-thumbnail Thumbnail function
. img-responsive Picture response (will well extend to parent element)

Bootstrap Precautions (vii) Photos

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More