It's going well, but I am just wondering if there is a way to make an image round. The image is loaded by a user and displayed on a webpage. The code around the image is:
var dynamicMediaItem = Umbraco.Media(apage.image);
You´re are welcome, you need different rounded corners of the sides, then the genrator can be nice to play with. The generator generates how the code should look like. It could be that you only want to have rounded corners on the left top and right top and so on.
Just want to add that if you're going to make an image or a <div> or another element completely round the rule of thumb is to make sure the element has fixed height and width dimensions and then you can set the border-radius to 50% like this
How can I make an image round
Hi All
It's going well, but I am just wondering if there is a way to make an image round. The image is loaded by a user and displayed on a webpage. The code around the image is:
var dynamicMediaItem = Umbraco.Media(apage.image);
<div class="home-page-box">
<div class="column w110 ">
<img src="@dynamicMediaItem.umbracoFile" alt="@dynamicMediaItem.Name" width="100" padding:5px 3px 5px 3px float:left/>
</div>
I have it floated left, is there a way to make it round?
Thanks.
Tony
Hi Tony,
You can do rounded corners of you images by adding this into your CSS
.home-page-box .w110 img{-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
With this style you will get 5px rounded corner on each side of the images, there is a generator here: http://border-radius.com/
Hope this helps,
/Dennis
Hi Dennis
Wow that was easy, works a treat!! Just have to increase the radius to suit now! :)
Thanks a lot.
Tony
Hi Tony,
You´re are welcome, you need different rounded corners of the sides, then the genrator can be nice to play with. The generator generates how the code should look like. It could be that you only want to have rounded corners on the left top and right top and so on.
/Dennis
Hi Dennis
That's cool I didn't notice you could set up each corner differently - that is really cool!!
Tony
Hi Tony
Just want to add that if you're going to make an image or a
<div>or another element completely round the rule of thumb is to make sure the element has fixed height and width dimensions and then you can set the border-radius to 50% like thisdiv{ height:100px; width:100px; border-radius:50%; }
/Jan
Hi Jan
Thanks for that. In my case I just made the width a fixed size to keep the scale of the picture, and let the height fill itself in.
Thanks.
Tony
is working on a reply...