Making circle images with html5 and css is relatively easy!
The image at the top of this post has been rounded and includes a border color. If you'd like to do the same with one of your own images (a square, rectangular or whatever shaped image which you may have) please place the following code in your .ccs file or right inside in <head></head> tags of your .html file between the <style></style> tags -
.img-circular {border-radius: 50%;border: 2px solid #000;}
You don't have to name it circular. You may give it almost whatever name you want.
After that you may place the following code * in your .html file somewhere (wherever you want it to be displayed at) between the <body></body> tags -
<IMAGE class="img-circular" src="your-image-location/and-file-name-and-file.type" />
What if you don't want the colored border? Just get rid of the border: 2px solid #000; -
Those are the basics my fellow Steemians! From there you may, if you desire to do so, add more style such as height:300px ; max-width:300px ; width:100%
Moreover, if you are working with a large picture which contains more than just the area that you want in the circle then you'll have to adjust the margin to get the circle over that area of the image. For example, lets use this image -
If we use the circular code provided near the top of this post we get this (which is fine) ↓ ↓ ↓
However, what if you want to move the circle around to another area of the image?
You'll need to add a margin element and adjust it to get the circle over the area (of the picture) that you desire. You'll also need to create a div class -
.circle-adjust {display: inline-block; position: relative; width: 400px; height: 400px; overflow: hidden; border-radius: 50%;}
Now somewhere (wherever you want the image to appear at) in your .html file use the above class to make a div class (insert this)-
<div class="circle-adjust"> </div>
You'll also need to create another class (this is where we'll use the margin element) for the image itself -
.circle-adjust img {width: auto; height: 100%; margin-left: -150px; margin-top: -20px;}
Now within your .html file, between the previously inserted <div> </div> tags, place the following code *-
<IMAGE src="your-image-location/and-file-name-and-file.type" />
I hope that all, or at least some, of the foregoing was helpful to someone here at Steemit! If you have any questions please feel free to ask below in the comments!
* IMPORTANT NOTE - Within all of the foregoing post I placed a "*" in two spots. This is because in the code cited directly below each I was forced to use the word IMAGE in lieu of img because Steemit was trying to render an image (which of course doesn't exist) from the code and it wouldn't allow me to post. PLEASE change IMAGE to img if you want the code to work for you. Thanks!
