Bootstrap--css--Pictures

Picture Style

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

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

Img-circle priority higher than img-rounded

< Body > <  src= "/wp-content/uploads/2014/06/download.png"    class= "img-rounded"  ><src= "/wp-content/uploads/2014/06/download.png"      class= "img-circle"></body> 

Picture border

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

<src= "/wp-content/uploads/2014/06/download.png"    class= " img-rounded img-thumbnail "><src="/wp-content/uploads/ 2014/06/download.png "    class=" Img-circle img-thumbnail ">

Picture Adaptive

Img-responsive: Let the image support responsive design. The picture expands well to the parent element. (The picture can automatically adjust the width with the page size )

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

      <src= "Cinqueterre.jpg"  class= "Img-circle img-thumbnail Img-responsive "  alt=" Cinque Terre "  width=" 304 "  height = "236" >

Bootstrap--css--Pictures