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

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

Auto-scroll feature malfunctioning

My auto scroll function using jQuery isn't working, here is my CSS: #convo_mes{ text-align:left; width:98%; height:80%; background:#fff; border:1px solid #000; overflow-x:auto; } And in my JavaScript: $(".mes").click(functio ...

javascriptjquerycss

Error in line 36: firebase.auth function is undefined

Snippet of index.html code <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" ...

javascripthtmlfirebasefirebase-authentication

What is the best way to transfer information from node.js to HTML?

This is a sample code in Node.js var http = require('http'); var request = require("request"); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!& ...

htmljsonnode.js

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

Hexagonal Shape with Rotating Border Gradient in CSS

Looking to create a hexagon shape with a rotating gradient border. Here's an example GIF for reference: https://i.stack.imgur.com/Ah1AO.gif I attempted using CSS only but the use of :after and :before tags proved limiting since they rely on border s ...

htmlcsssvg

Open the PDF document in a stylish jQuery popup like fancybox or a similar plugin

Can a PDF file be loaded in a popup? I understand that some browsers may require Adobe Reader to view PDFs, but Chrome has its own built-in PDF viewer. ...

phpjqueryhtmlpdfpopup

Unable to showcase the compilation in PDF form

I have a link on my page that, when clicked by the user, retrieves a list from the database using an ajax call and displays it. Now, I'm looking to add another link that, when clicked, will fetch the list from the database via ajax and present it in ...

jqueryhtmlcssajaxpdf

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

javascriptcssdom

Tips for creating line breaks in Google Chart tooltips

I'm having trouble breaking a line in the code snippet below. Here is the complete code: <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script ...

javascripthtml

I am looking to reposition the navbar span tag so that it appears beneath the icon, utilizing both HTML and CSS

I'm currently working on a navbar design with 5 items, each containing an icon and a span tag. However, I'm facing difficulties in aligning the span tag below the icon for all 5 items in the navbar. Despite my best efforts, I have been unable to ...

htmlcss

Inject an html <img> tag using an AJAX PHP call

Greetings everyone, I am currently in the process of developing a captcha maker using PHP with an Object-Oriented Programming (OOP) approach. The implementation involves a Captcha class responsible for generating the captcha image. You can find the complet ...

phpjqueryhtmlajax

Waiting for response in AngularJS Controller and setting callback

I have developed an AngularJS application with controllers.js and factories.js that I am excited about. However, I am facing a challenge when trying to manipulate the values within the controller (retrieved from the factories). The issue is that these val ...

javascripthtmlangularjs

How to emphasize a clicked hyperlink in AngularJS

Here's the HTML code I've been working on: <div id="Navigation" class="md-dialog-full"> <div class="products-options"> <a ng-click='addType("Physical")' href="javascript:void(0);"> < ...

javascripthtmlcssangularjs

What is causing me to have difficulty importing any of the images located in the public folder?

I'm currently tackling the NextJS framework, and I'm having trouble importing images that are stored in the public folder. Despite being able to navigate through folders, the images aren't displaying as expected. Here is the import line and ...

htmlreactjsnext.jstailwind-cssreact-fullstack

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...

javascriptjqueryhtmlcssjquery-ui

JQuery: Techniques for accessing the assigned font of an element

Can the assigned font of an element be retrieved using jQuery? For example, if there is this CSS: #element { font-family: blahblah,Arial; } In the above case, the Arial font will be assigned to #element. Is it possible to extract that information using ...

javascriptjquerycssfonts

Struggling to implement a seamless scrolling effect using CSSTransition Group

In my quest to achieve a smooth vertical scroll effect for content appearing and disappearing from the DOM, I've turned to CSSTransitionGroup (or ReactTransitionGroup). While I'm familiar with CSS animations for such effects, I need to implement ...

javascripthtmlcssreact-transition-groupreactcsstransitiongroup

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4

What is the process for inheriting HTML templates?

I am currently utilizing KnockoutJS along with its default template engine. My goal is to establish a master template that can serve as a foundation for other templates to build upon, similar to a UserControl in .NET but within an HTML context. For instan ...

jqueryhtmlknockout.js