How to Create Circular Images with HTML and CSS

The correct presentation of images on a website is essential for enhancing user experience and the aesthetics of the page. One of the most popular styles for displaying images is the circular shape. In this article, you will learn how to create circular images using only HTML and CSS, thus optimizing your web design.

What You Need to Know

Before you start implementing circular images, it is important to keep some basic concepts about HTML and CSS in mind. Make sure you have a fundamental understanding of:

HTML: To structure the content of your web page.
CSS: To apply styles and shape your content.

Basic HTML Structure

Let's start by creating the basic structure of an HTML document. Be sure to include the necessary tags so that the code is interpreted correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Circular Images</title>
</head>
<body>
    <div class="circular-image">
        <img src="path-to-your-image.jpg" alt="Image description">
    </div>
</body>
</html>

Explanation of the Code

The <html> tag defines the beginning of an HTML document.
Inside the <head>, you can include information about the page, such as the title and the stylesheet.
In the body (<body>), we create a container <div> with the class circular-image that will include the image we want to display in circular format.

CSS Styles to Create Circular Images

Once you have your HTML structure, it’s time to add styles in CSS. You can create a file named styles.css and add the following:

.circular-image {
    width: 150px; /* Width of the container */
    height: 150px; /* Height of the container */
    overflow: hidden; /* Hide overflow */
    border-radius: 50%; /* Rounded borders to create the circular shape */
    display: flex; /* Facilitate image alignment */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

.circular-image img {
    width: 100%; /* Make the image occupy the entire container */
    height: auto; /* Maintain image proportions */
}

Description of the Styles

.circular-image:
- width and height determine the size of the image container.
- overflow: hidden ensures that any part of the image that exceeds the container will not be shown.
- border-radius: 50% transforms the container into a circle.
- display: flex, justify-content: center, align-items: center center the image within the circular container.
.circular-image img:
- width: 100% ensures that the image fits the circular container.
- height: auto maintains the image’s proportion and avoids distortion.

Complete Example

When combining the HTML and CSS we've created, your complete code should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Circular Images</title>
    <style>
        .circular-image {
            width: 150px;
            height: 150px;
            overflow: hidden;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .circular-image img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="circular-image">
        <img src="path-to-your-image.jpg" alt="Image description">
    </div>
</body>
</html>

Additional Considerations

Responsiveness

To ensure that the circular image looks good on different devices, you can use relative units like vw (viewport width) or vh (viewport height), or use media queries to adjust the container size based on the device's screen size.

Accessibility

It is important to include an alt attribute in the <img> tag to ensure that the image is accessible to people with visual impairments. Make sure that the alt text is descriptive and relevant to the image content.

Conclusion

Creating circular images with HTML and CSS is a straightforward process that adds a modern and attractive touch to your web design. By following the steps above, you can implement this technique in any project. Feel free to experiment with sizes, margins, and other CSS properties to customize your images according to your needs. Start applying what you’ve learned and enhance the visual presentation of your website!

With these resources, you can delve deeper into the use of HTML and CSS for creating responsive and accessible designs.