Circular Profile Image

I am currently developing an application that features a home screen displaying a client's biography. I am working on creating a header that will have a title and a circular display image. In the code, I have used 3 divs to hold the wrapper, title, and picture. I have used flex display to have them in one line and flex:1 to position the image to the right. However, when applying a border-radius of 50%, the photo seems to be squished. Can you assist me with this issue?

Thank you. Here is the code snippet:

.headerOfBio {
  display: flex
}

.displayPic {
  flex: 1;
  background-image: url("../images/displayPicture.jpg");
  border-radius: 50%;
}
<div class="quote titleBio">
  <div class="headerOfBio">
    <h3>
      MEET THE <span class="diffColor">FOUNDER</span>
    </h3>

    <div class="displayPic">

    </div>
  </div>

</div>

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

After adding height and width it becomes like this:

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

htmlcssflexboxhtml-framework-7

Answer №1

For a more successful outcome, consider using an img tag instead of a background image within a div element.

.headerOfBio {
  display: flex;
}

.displayPic img {
  flex: 1; 
  width:50%;
  border-radius:100%
}
<div class="quote titleBio">
  <div class="headerOfBio">
    <h3>
      MEET THE <span class="diffColor">FOUNDER</span>
    </h3>

    <div class="displayPic">
      <img src="https://placeimg.com/250/250/nature" /> 
    </div>
  </div>

</div>

Answer №2

Specify the dimensions of the div containing the image and set the border-radius to half of the width or height.

.profileImage{
    flex: 1;
    background-image: url("../images/profilePic.jpg");
    width: 250px;
    height: 250px;
    border-radius: 125px;
 }

Answer №3

What is the purpose of using flex:1 in this code?

Consider implementing the following changes...

.headerOfBio {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.displayPic {
  background: url("https://aeutas.org.au/wp-content/uploads/2014/12/people-icon.png") no-repeat;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  border-radius : 50%;
}

https://jsfiddle.net/cd3czf30/1/

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

Centered CSS navigation bar without any spacing between the buttons

Good evening everyone, I am looking to create a navigation bar that is centered on the screen with no gaps between the buttons. I have tried using 'float:left' to close the gaps, but this aligns the navigation bar to the left. Without 'floa ...

htmlcss

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Choosing a dynamic dropdown option using jQuery and AJAX

I am facing an issue with a select box that is dynamically populated and should display information about a single option. The problem I am encountering is that the browser does not trigger a ':selected' event when I click on any of the options. ...

javascriptjqueryhtmlajax

SQL AJAX Query Form

I have been searching for tutorials on how to create a good form with PHP and AJAX. I tried starting with a code given to me by a friend and managed to send the request successfully. However, it seems like the data I receive is empty. Could you please take ...

javascripthtmlsqlajax

Replicate the ctrl+/- function through coding

While browsing with your browser, you have the ability to adjust the font size by using CTRL + + or CTRL + -. Is there a way to replicate this functionality through code, such as with JavaScript? I am looking to add buttons on my website that allow users ...

javascriptcss

Tips on how to efficiently wrap content within a column layout, and to seamlessly shrink it if necessary

I recently encountered an issue where I am attempting to create a three-column layout with each column filled with a dynamic number of divs (boxes) ranging from 5 to 15, each with its own height based on its content. These divs are expected to: 1) Be dis ...

javascriptcssangularjsresponsive-designangular-material

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

javascripthtmlangularjschart.js

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Encountering issue with accessing ids of dynamically generated HTML elements using javascript In my current project, I am attempting to dynamically alter the ids of div elements and remove buttons that are appended to the parent div. The desired functiona ...

javascriptjqueryhtmlcssjson

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...

htmlcss

Adjust the existing percentage of a never-ending CSS animation

I am looking to create a simple slider from scratch. The sliding functionality is working perfectly in an infinite loop, but I want to add the option for users to skip to specific slides (e.g. using arrows). @keyframes slider-ani { 0% { left: 33.3%; } ...

javascriptjquerycsscss-animations

How to create a captivating image effect using CSS on hover

I am attempting to create an animated image on hover. The desired outcome is similar to the one showcased here: Check it out (scroll to view the image "Our Team") Essentially, I want a background where I can showcase information such as names and links ju ...

htmlcss

Activate a hyperlink from a distance

I have a side menu that includes a form for logging out (generated by MVC). Is there a way to set it up so that when the user clicks on the <li> element, it automatically triggers the log out link? I'm curious if using inline Javascript or anot ...

jqueryhtmlasp.net-mvc

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

jqueryhtmlcheckboxjquery-ui-selectable

Include a series of HTML attributes within an HTML element

I need to take a string of attributes that are formatted in valid HTML and apply them to a specific HTML element, rather than just creating a new string with those attributes. For instance, I have a variable named attributesStr that contains the string of ...

javascriptjqueryhtmlattributes

Unspecified variable in AngularJS data binding with Onsen UI

I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...

javascripthtmlcssonsen-ui

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

While developing my app using PhoneGap and jQuery, I encountered a dilemma regarding animations. Initially, I relied on what I knew best - jQuery animate - to create smooth movements. However, discussions about hardware acceleration caught my attention. ...

cssjquery-animatecss-transitions

Python Selenium returning 'None' when attempting to retrieve the source attribute of an image

Having trouble retrieving the src of images in the class "KfFlO" using selenium. Whenever I try to print for the source, Python keeps returning "none." Can anyone help me identify the problem? Below is my code snippet: from selenium import webdriver from s ...

pythonhtmlimageselenium-webdriverweb-scraping

Version 2 of the Microsoft Logo Animation

I made some changes to my Microsoft logo animation project. You can view the updated version on CodePen. Overall, I'm pretty happy with how it turned out except for one issue. I'm struggling to determine the right timing to end the animation so ...

javascriptjqueryhtmlcssanimation

Utilization of Scrapy chain selector amidst varied parent elements

I am trying to concatenate two selectors with different parents. The first selector currently in use is: ..css('td:nth-child(8) > span.cap.mtv > ::text') This returns: <Selector xpath="descendant-or-self::td[count(preceding-sibling::* ...

csspython-3.xxpathscrapy