CODEWITHSUNDEEP
javascriptcss
abiieez
abiieez

Reputation: 3189

How do we display the circled area of an image in html?

I have an image which is in rectangular shape. However, I would like achieve an end result as below.

enter image description here

How can I achieve this in CSS / javascript?

Upvotes: 0

Views: 73

Answers (5)

Nitesh
Nitesh

Reputation: 15749

Here you go.

WORKING DEMO

The HTML:

<img src="http://coolvibe.com/wp-content/uploads/2013/01/Portrait-Alexander-Beim-Bruce.jpg" />

The CSS:

img{border-radius:500px; border:2px solid #000000; width:200px; height:200px;}

I hope this is what you are looking for.

Upvotes: 1

Love Trivedi
Love Trivedi

Reputation: 4046

img{
   border-radius:50%; 
   border:1px solid #000000;
   height:150px;
   width:200px;
}
/*You can change height width*/

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

If you have an img tag, than simply use the snippet below to make it round

.container_class img {
   border-radius: 50%;
   height: 200px;
   width: 200px;
}

Demo

Demo 2 (With border)

The above examples will give you a perfect circle as height = width, if you want an elliptical shape, as you've provided in your question, than you can simply increase the width of your img tag like

Demo

Note: border-radius is a CSS3 property, as of now it is widely supported across browsers, still if IE is a game spoiler for you, there are polyfills available like CSS3 Pie

Upvotes: 3

majorhavoc
majorhavoc

Reputation: 2415

Use border-radius: 50%; not supported in IE8 though.

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11293

You can achieve it using border-radius:

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
    /* width and height can be anything, as long as they're equal */
}

For more info check out this article.

Upvotes: 3

Related Questions