Create a circular shape using CSS that dynamically adjusts its size to match the width

Question

Create a circular shape using CSS that dynamically adjusts its size to match the width

Can you help me with a CSS challenge? I need to create circles around elements on a webpage, but my code is not working perfectly. The width of the circle is off and I can't seem to center it properly.

The width does not match the content (it is always too big), and
I am struggling to get it to center on the child element

Here is the code I currently have:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Circle Demo</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>

This code produces imperfect results as the circles are not centered on the images and the widths are incorrect.

Is it possible to correct this using just CSS?

https://i.sstatic.net/kDCOB.jpg

html css

Answer 1

Answer №1

To ensure the div works properly, set it to display:inline-block.

By default, divs are block-level elements, taking up 100% of the width.

Update: The issue arises from using % to size the image, which relies on the parent's width. In this case, we aim to adjust the parent based on the child, so that approach won't be effective.

The closest solution is to avoid sizing the image in %. Instead, 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 resizing in % is crucial, consider adding another container and sizing that 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>

Answer 2

To ensure the div works properly, set it to display:inline-block.

By default, divs are block-level elements, taking up 100% of the width.

Update: The issue arises from using % to size the image, which relies on the parent's width. In this case, we aim to adjust the parent based on the child, so that approach won't be effective.

The closest solution is to avoid sizing the image in %. Instead, 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 resizing in % is crucial, consider adding another container and sizing that 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>

Answer 3

Answer №2

Typically, the default width of a div element is 100%, which explains why your circles appear so large and off-center within the container.

Have you considered applying the red circle border directly to the img tag instead of the div? This would involve placing the circular design on the child element initially.

Alternatively, you could adjust the div to match the size of its content by utilizing display: inline-block within the .ccc class.

If neither of these solutions works for you, it's likely that there is no purely CSS-based method to achieve the desired result.

Answer 4

Typically, the default width of a div element is 100%, which explains why your circles appear so large and off-center within the container.

Have you considered applying the red circle border directly to the img tag instead of the div? This would involve placing the circular design on the child element initially.

Alternatively, you could adjust the div to match the size of its content by utilizing display: inline-block within the .ccc class.

If neither of these solutions works for you, it's likely that there is no purely CSS-based method to achieve the desired result.

Create a circular shape using CSS that dynamically adjusts its size to match the width

Answer №1

Answer №2

Similar questions

Unable to adjust iframe height

Using HTML video to fill entire div container

Tips for invoking a JavaScript class method from an HTML document

Image not found in PDF created from HTML to PDF conversion

Add HTML syntax highlighting to a text area for coding purposes

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

What is the best way to send JSON data to Sass in ReactJS?

What causes the button's frame color to change when I click on it?

When attempting to view an .html file, SVG images may not appear on

Centralizing the Accordion header and expansion icon in React with Material-UI

Creating the perfect layout with CSS: A step-by-step guide

Change the way a button interacts with a different element

What is the best way to increase the size of the left margin?

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Calculate the combined total of two inputted values instantly

What are the steps to adjust image size using CSS in an email signature?

The effectiveness of border-radius is limited to only one side of the div

Updating the current date at midnight or on the new day in JavaScript can be achieved using specific date and time

Formatting Outlook HTML Signatures