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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -