Creating a Circular Image Icon Using HTML/CSS: A Step-by-Step Guide

Struggling to fit my image into a circular icon with dimensions of 64px by 64px. The image appears full and in a defined frame, but does not shrink or take on a circular shape.

  1. The image is displayed in its entirety within a frame of 64x64 pixels
  2. The image remains at its original size without shrinking
  3. The desired circular shape is not achieved

You can view what I have tried so far here:

https://jsfiddle.net/soniya_jain/esu413wv/5/

Below is the code snippet that I am using:

<html>
 <img src="https://www.iphonehacks.com/wp-content/uploads/2019/06/Apple-ios-13-home-screen-iphone-xs-06032019.jpg" class="rounded imgProfile" height="55px" width="55px" alt="avatar">
</html>


 <style>
   .imgProfile {
     display: block;
     object-fit: contain;
    }
 </style>

If you have any ideas or suggestions, please feel free to share them.

htmljquerycssbootstrap-4html5-canvas

Answer №1

Make sure to enclose it within a container.

.image-container {
  border-radius: 50%;
  overflow: hidden;
  height: 64px;
  width: 64px;
}

.image-container img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<html>
  <div class="image-container">
    <img src="https://www.iphonehacks.com/wp-content/uploads/2019/06/Apple-ios-13-home-screen-iphone-xs-06032019.jpg" alt="avatar">
  </div>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

image in responsive css design

Image 1 (Current Layout) Image 2 (Desired Layout) I am trying to achieve a responsive layout similar to the second image. However, I seem to be stuck with the layout from the first image. Here is the CSS code I'm currently using: @media (max-width ...

htmlcssresponsive

Share your message with BotFramework WebChat by simply clicking on the provided link

A chatbot I created using Microsoft Bot Framework has been integrated into my website through DirectLine: <div id="chatbot_body"></div> <script src="https://unpkg.com/botframework-webchat/botchat.js"></script> <script> ...

javascriptjquerybotframeworkdirect-line-botframework

Several dropdown menus within the same container, working independently of each other

I recently encountered an issue with a drop-down navigation bar. When I have multiple drop-downs and click on one, it opens as expected. However, if I then proceed to click on another drop-down while the first one is already open, both of them remain open ...

javascriptjqueryhtmlcss

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

What is the method used by flexbox to determine the width of a flex-item when neither flex-basis nor width is specified?

Can you explain how flexbox calculates the final width of flex-items when specific properties like flex-basis, width, min-width, or max-width are not set? I'm curious about how flexbox determines the width based solely on content. Check out this exam ...

htmlcssflexbox

I'm looking to send JSON data using jQuery's AJAX method - how can I

I was recently assigned a project with the following instructions: Develop an HTML page that will use our API endpoint to fetch a list of logs from our API logger and display them in a visually appealing grid. The page should automatically make this call e ...

javascripthtmljqueryjsonajax

Accessing Microsoft SQL Server Data in Cordova Application utilizing PHP

While I have experience creating simple mobile apps in Cordova, I am now looking to delve into the world of creating database apps. A database app for me means integrating MSSQL Server, HTML, and PHP. In my quest for information on this topic, I scoured v ...

phpjquerysql-serverajaxcordova

AngularJS: When the expression is evaluated, it is showing up as the literal {{expression}} text instead of

Resolved: With the help of @Sajeetharan, it was pinpointed that the function GenerateRef was faulty and causing the issue. Although this is a common query, I have not had success in resolving my problem with displaying {{}} to show the outcome. I am atte ...

htmlangularjsweb-applications

What is the best way to create a toggle effect for a <nav> bar that appears from beneath a div?

I need assistance with a navigation setup where the nav (located inside the header) needs to be connected to the bottom of a div named .menu_bar. The desired behavior is for the nav to slide down from directly underneath the .menu_bar when toggled, but cur ...

javascriptjqueryhtmlcss

AJAX response: Error 404 - Resource Not Found

Attempting to retrieve data from the database using an ajax call is resulting in the following error: https://i.sstatic.net/ieZud.jpg The ajax call in question is as follows: $.ajax({ url : '<?php echo base_url('Create_controller/getCat ...

phpjqueryajaxcodeigniter-3

Creating a fantastic Image Gallery in JavaScript

As I work on creating a basic gallery page with html and css, everything seemed to be running smoothly. However, upon testing it in Google Chrome and IE, the onmouseover function is not responding as expected. The idea is for a larger image to display in t ...

javascriptjqueryhtmlcss

Restricting the number of rows in each div in a JSP data table

On my webpage, I have labels and input text fields for users to enter data to send back to the server. Sometimes, the server sends over 50 rows of information, which causes the user to scroll multiple times to see all the fields. I'm thinking of creat ...

htmlcssjspjsf

Sorting Tables through the Power of Drag and Drop

While utilizing both the Jquery Tablesorter plugin and the Drag and Drop plugin together, everything seems to be functioning correctly. However, when attempting to use the serialize function of the tableDnD, an error message stating "empty string getElemen ...

javascriptjqueryjquery-ui-draggabletablesorter

Conceal webpage elements using jquery selectors

Would you like to modify the following code snippet which contains 6 questions within it: <body> <form> <h3>blah</h3> <table> <tr> <th>Input 1:</th> ...

jqueryjquery-selectorshide

Django not rendering view correctly when jQuery event button shows the correct response

I am facing an issue with displaying incorrect login errors using jQuery click function. While my code seems to be functioning properly and the jQuery event(button click) is showing the correct response, the Django views are not rendering the response accu ...

jquerydjangoajax

Struggling to connect CSS and JS files in an HTML document

I'm encountering issues while trying to connect CSS and JS files to my HTML file's head section. Below is the HTML code snippet: <!DOCTYPE html> <html lang="en"> <head> <title>title</title> <link rel=" ...

htmlcssexpress

The updates made to a variable within an ajax request are not immediately reflected after the request has been completed

My global variable is not displaying the expected result: function checkLiveRdv(salle, jour, dateus, heure) { var resu; var urlaction = myUrl; $.ajax({ type: "POST", dataType: "json", url: urlaction, data: myDatas, suc ...

javascriptajaxvariablesjquery

Enhancing elements with CSS by adding transformations and box shadows upon hovering

My card component using material UI has a hover effect with a transforming animation, as well as a shadow that should appear on the card. However, I am facing an issue where the box-shadow appears on the box before the transformation, creating white space ...

cssmaterial-uitransformcard

Creating distinct identifiers for CSS JQ models within a PHP loop

Can anyone assist me in assigning unique identifiers to each model created by the loop? I am currently looping through a custom post type to generate content based on existing posts. I would like to display full content in pop-up modals when "read more" i ...

javascriptphphtmljquerycss

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss