CODEWITHSUNDEEP
htmlcss
ekstroem
ekstroem

Reputation: 6191

CSS circle to match width of div content

I'd like to be able to circle elements on a web page using only CSS. I have some code that is almost working - it produces a circle around the element but

The following code is what I currently have

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>

</head>
<body>
<style>
div.ccc {
  display: run-in;
  position: relative;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}


</style>


<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>

<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>

</body>

which produces the following. Note that the circles are not centered on the images and the width's are off.

Is it possible to fix that using CSS only?

enter image description here

Upvotes: 0

Views: 673

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3933

Set the div to display:inline-block and it will work.

Divs are block-level elements by default, which mean they'll take 100% the width.

edit: problem is that you're using % to size the image, which depends on the parent width... and we are trying to get the parent sized accordingly to the child... So that won't work.

Closest you can get, as far as I can tell, is avoid sizing your image on %, and display the div as inline-block

div.ccc {
  position: relative;
  display:inline-block;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}

.small{
  width:200px;
}
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>

<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>

if you really need to size it as %, you'll need to add another container and size that one instead

div.ccc {
  position: relative;
  display:inline-block;
}

div.ccc:after {
  display: inline-block;
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;
  opacity: 0.7;

  border: 5px solid red;
  border-radius: 50%;
  padding: 10px;
}

.img-container{
  display:inline-block;
}

.img-container img{width:100%}

.small{
  width:200px;
}
<div class="ccc">
  <div class="img-container small">
    <img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
  </div>
</div>

<div class="ccc">
  <div class="img-container">
    <img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
  </div>
</div>

Upvotes: 1

T. Ruxton
T. Ruxton

Reputation: 54

The width of a div is 100% by default, that's the reason all your circles are massive and not centred on the child.

Why not just put the red circle border on the img tag instead of the div? I.e., put the circle on the child element in the first place.

Another option would be to get the div to match size of the content by setting display: inline-block on the .ccc class.

If neither of those is an option, I'm pretty sure there is no pure CSS way of doing it.

Upvotes: 0

Related Questions