html - CSS for image like in facebook and other social media -
i want make "profile picture" thing on website. don't how generate without making picture stretch or pixelated here sample code way i'm using bootstrap css framework.
<div class="center-block" style="background-image:url(img/1.jpg); width: 200px; height: 200px; background-size: cover; display: block; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;">
try can make style play around css...
div { float: left; margin: 5px; } .profile_1 { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; } .profile_1 img { max-width: 120px; max-height: 120px; } .profile_2 img { width: 120px; height: 120px; border-radius: 50%; border: solid 3px #000; } .profile_3 img { width: 120px; height: 120px; border-radius: 10px; border: solid 3px #fff; box-shadow: 0 0 3px 2px #ccc; }
<div class="profile_1"> <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" /> </div> <div class="profile_2"> <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" /> </div> <div class="profile_3"> <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" /> </div>
Comments
Post a Comment