about 6 years ago
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/
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)