CODEWITHSUNDEEP
phpcss
user2491321
user2491321

Reputation: 673

cannot place image inside circle

I have an image comes out from my code in php. My image displayed successful. The only problem is that I can insert it into the circle. It is displayed above the circle. Any idea how to place it inside circle?

<?php
 //$path_img is the image
 <div class='circular'><div class='display'> $path_img </div></div>
?>

and my CSS is the following:

.circular {

width: 50px;
height: 50px;
border-radius: 50px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

}

Upvotes: 1

Views: 454

Answers (2)

bakkerjoeri
bakkerjoeri

Reputation: 223

The HTML

I'm going to start by assuming that $path_image is some form of <img src="path/to/image.png">. Note that the .display div is unnecessary markup; it doesn't help nor hinder the container display correctly. It can safely be removed without any impact, but if needed you can just leave it in.

So let's check out what the most appropriate rendered HTML for the circular image should look like:

<div class="circular">
  <img src="path/to/image.png">
</div>

The CSS

To accomplish a circular container, you correctly applied the border-radius styling, but the math is off. You can have a border radius of up to the width and height (which should be equal, otherwise the result will not be circle).

Now, though, the image will spill out of the container. You'll have to tell it to hide its overflow, like so:

.circular {
  overflow: hidden
}

Using negative margins and width and height style attributes you can resize the image within the container to your liking.

Conclusion

So, in the end, you most likely just needed to add overflow: hidden. An example of the result can be seen here: http://jsfiddle.net/Zh5VK/

Upvotes: 1

Asraful Haque
Asraful Haque

Reputation: 1125

At first I will suggest you image size must be fit with the div that means .circular div width and height are 50px so image size must be 50px both of width and height.

Check the code it will fit properly!
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Ollema Records Online Drum and Bass Radio</title>
<style>
.circular {

width: 50px;
height: 50px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

}
.display {
     background-image: url("logo.jpg");
    height: 50px;
    margin: 0 auto;
    text-indent: -9999px;
    width: 50px;
}
</style>
</head>
<body>
<div class='circular'><div class='display'>Logo Here</div></div>
</body>
</html>

I have posted an webpage image portion that with the previous css code fit the image .I think that it is the required answer! enter image description here

Upvotes: 1

Related Questions