The styling of Div remains unchanged by CSS

Currently, I am working on a website using HTML and CSS.

I have created a division element and applied a class to it called profile_pic. However, when I make changes to this class in the CSS file, it does not reflect on the div. It seems like the styling is not being applied to the div with that specific class and I'm unsure of the reason behind it.

Interestingly, if I use the same class within an image tag, then the changes are visible. But as soon as I move the class back to the original div element, the style changes disappear. Can someone please shed some light on what might be happening here?

.profile_pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 25px;
  display: inline-block;
}
<div class="profile_pic">
  <img src="https://via.placeholder.com/100">
</div>

<div>
  <img class="profile_pic" src="https://via.placeholder.com/100">
</div>

htmlcss

Answer №1

The modifications are indeed effective. This can be verified by inspecting the elements using your browser. The reason for not seeing the changes in the initial example is due to the lack of constraining the image within the div. Applying a property like overflow: hidden would demonstrate that the changes do take effect.

An issue to note is that object-fit pertains to "replaced elements" such as images, and not structural elements like divs, causing a shift in the image position in the first scenario. To resolve this, setting the width of the image to 100% can rectify the problem.

.profile_pic {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 25px;
  display: inline-block;
  overflow: hidden;
}

.profile_pic img {
  max-width: 100%;
}
<div class="profile_pic">
  <img src="https://via.placeholder.com/100">
</div>

<div>
  <img class="profile_pic" src="https://via.placeholder.com/100">
</div>

Answer №2

Here's a different approach using the clip-path property:

.profile_pic {
  display: flex;
  width: 50px;
  height: 50px;
  clip-path: circle(25px);
}
<div class="profile_pic">
  <img src="https://via.placeholder.com/100">
</div>

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

Difficulty encountered while using CSS to customize a vue template

I'm currently working on a login page and experiencing difficulty styling Vue templates using CSS. Here is the code that works without Vue: HTML <body class="text-center"> <form class="form-signin"> <h1 class="h3 mb-3 fon ...

htmlcssvue.jsvuejs2

Safari on IOS transition transform feature malfunctions

Every time I try to apply some code to make a div move, for example using the latest iOS Safari browser, it fails to transition between the two rules set. I have experimented with different values other than percentage but still haven't been able to m ...

csssafaricss-transitionsvendor-prefix

Tips on displaying an avatar above and outside the boundaries of a background element using Chakra UI

They say a picture is worth more than a thousand words, and in this case, it holds true. The best way to illustrate what I'm trying to accomplish is through the image linked below. https://i.stack.imgur.com/5WvkV.png I envision having the avatar po ...

htmlcssreactjsuser-interfacechakra-ui

Attempting to consistently place an element at the bottom of my div container

I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...

htmlcss

Using HTML Select field to make ajax calls to web services

When working with modals that contain forms to create objects for database storage, there is a Select field included. This is the code snippet for the Select field: <div class="form-group" id=existingUser> <label>Username</label> < ...

javascriptjqueryhtmlajaxmodel-view-controller

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

javascriptjqueryhtmlcss

I am curious if there is a method to vertically center text without being affected by the font-family or font-size

Searching for a font-independent method to center text within a div. My div has a button-style fixed height, and I need the text (one line only) to be centered vertically within it. The issue arises when changing the font-family, as some fonts do not ali ...

cssvertical-alignmentwebfonts

I am experiencing difficulty getting my CSS styles to apply to my application that is being rendered using zappa, express, and node.js

Here is a link to my code: http://pastebin.com/jcLRCrQr Although everything else seems to be working fine - CSS sheets loading correctly, JavaScript files functioning properly - I am facing an issue where the styles are not being applied. An odd thing I ...

cssnode.jscoffeescriptexpresszappa

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Adjust image placement when resizing the window or rotating a mobile device

When the window is maximized or the phone is in portrait position, the magnifying glass stays in its place. However, when I resize the window or rotate the mobile phone, the position of the magnifying glass changes. I've tried using different units ...

htmlcss

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

javascriptjquerycsscss-transitions

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

javascriptjqueryhtml

Retrieving data from a database in PHP and assigning it as the value for an HTML select tag

Seeking assistance on a project to develop a stock management system for an herb factory using PHP with a MySQL database. Currently working on a page that allows the user to edit the value of a bench containing herbs. The bench details have been stored in ...

phphtmlmysqlarrays

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

Is there a way to handle two inputs in HTML5 so that both can be sent to the controller and saved as Date Time? Alternatively, is there any helper or gem that mimics a date and time picker from HTML5? HTML5 inputs: %input{:type => "date", :value => ...

jqueryruby-on-railshtmldatetimehtml-helper

Modifying the Header Background Color

Looking for help on my forum at The header background on my site needs fixing. I am trying to change the entire header background to match the color of the logo background, but I'm unsure what codes need to be adjusted. Can anyone provide guidance? ...

htmlcss

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I'm a beginner when it comes to Javascript, and I'm still getting the hang of CSS/HTML. Currently, I am working on creating a vertical menu using CSS and javascript. My goal is to have the sublevels appear on the right side of the menu when someo ...

javascripthtmlcssdrop-down-menumenu

Avoiding scrolling when a button (enveloped in <Link> from react-scroll) is pressed in React

Currently, I am implementing the smooth scroll effect on a component using react-scroll. However, adding a button inside the component to create a favorite list has caused an issue where the smooth scroll effect is triggered upon clicking the button. Is ...

javascripthtmlcssreactjs

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

cssruby-on-railsreactjsweb-applicationsstyled-components

Styling triangles within a CSS triangle

I'm attempting to design a webpage with a fixed triangle navigation element. The issue I am encountering is that I am unable to position smaller triangles inside the larger one, as shown in the image below. https://i.stack.imgur.com/1bTj8.png As th ...

javascripthtmlcsscss-shapes

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

asp.net.nethtmlcsshtml-input