In this blog, I'll tell you how to style images whether its image with rounded corners, image with circular shape, image with thumbnail shape.
Rounded Corners :-
The class .img-rounded is used to add rounded corners to an image.
<div class="container">
<h2>Image with Rounded Corners</h2>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRyycuqa9htsDRKTkIfr_L_JzJjsEjXVsa_A6-GNW-CvSpxTiraZ172KHs" class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>
https://jsfiddle.net/fok4a0bb/3/
Circle Images :-
The class .img-circle is used to add the circle image.
<div class="container">
<h2>Circle Image</h2>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRyycuqa9htsDRKTkIfr_L_JzJjsEjXVsa_A6-GNW-CvSpxTiraZ172KHs" class="img-circle" alt="Cinque Terre" width="190px" height="190px">
</div>
https://jsfiddle.net/9kjqc5qs/2/
Thumbnail Images :-
The class .img-thumbnail is used to shape the image to a thumbnail.
<div class="container">
<h2>Thumbnail Image</h2>
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
https://jsfiddle.net/f3b4sc4b/2/
0 Comment(s)