html - make picture fit in css circle -


is there way can make picture fit automatically in css circle? fx if user add picture there 500px * 500px, circle 100px * 100px. when upload picture now, picture filling out screen, instead of staying inside circle.

<html> <head>   <style>     #circle  {    border-radius:50% 50% 50% 50%;      width:100px;    height:100px; }  </style>  </head> <body>    <img src="skin-tone.jpg" id="circle"> </body> </html> 

try css

#circle {     background: skin-tone.jpg;     background-size: cover;     border-radius:50% 50% 50% 50%;     width:100px;     height:100px; } 

Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -