How can i display circle image from rectangular image using bootstrap?
Here is may code for circle;
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" >
But it is work for only Square images, For Rectangular image it will become eclipse. How Can we resolve it without giving fix height or width?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body class="w3-container">
<h2>Image in a Circle</h2>
<p>You do not need boostrap, you can use w3-schools libraries instead</p>
<img src="http://i.imgur.com/lGq1IXo.png" class="w3-circle" alt="" style="width:50%">
</body>
</html> 
You can achieve this by giving the image as background from this answer - Bootstrap 3: Using img-circle, how to get circle from non-square image?
Well, If you still want to use Img tag to display the image then, I found the solution in a weird way.
div.wrapper {
text-align: center;
width: 300px;
margin: 0 auto;
}
img {
width: 100%;
}
.clipped-image img {
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
width: auto;
height: 100%;
transform: translateX(-50%);
}
.clipped-image {
display: block;
position: relative;
margin: 0 auto;
/* desired width */
}
.clipped-image:before {
content: "";
display: block;
padding-top: 100%;
/* initial ratio of 1:1*/
}
.clipped-image .mask {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
overflow: hidden;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<h4>Original image</h4>
<div class="real-image">
<img src="http://loremflickr.com/320/240">
</div>
<br>
<br>
<br>
<h4>Image after clipping</h4>
<div class="clipped-image">
<div class="mask">
<img src="http://loremflickr.com/320/240" class="img-circle" alt="Cinque Terre">
</div>
</div>
</div>
I found a good solution and edited it so you can just change the size of the canvas and the image will still align. The x_move and y_move variables determine which part of the image is shown
var myImage = new Image();
var size = myCanvas.width;
var x_move = -35;
var y_move = 0;
function displayImage() {
canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
myImage.onload = function() {
ctx.drawImage(myImage, x_move, y_move, (myImage.width / (myImage.height / size)) , size );
ctx.strokeStyle = "white";
ctx.lineWidth = (size/2).toString();
ctx.beginPath();
ctx.arc(size/2, size/2, size*0.75, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
}
myImage.src = "https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2016/09/astley1_index1a.jpg";
}
}<!DOCTYPE html>
<html>
<body onload="displayImage()">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>Original Code:
https://www.authorcode.com/show-image-into-a-circle-shape-in-html5/
This can be simply achieved by doing:
Add a class to your image just like this:
.rounded {
flex: none;
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}<img class="rounded" src="https://images.vexels.com/media/users/3/145922/preview2/eb6591b54b2b6462b4c22ec1fc4c36ea-female-avatar-maker.jpg"/>
