Guide to incorporating a rectangular image into a circular frame with CSS

I have a rectangular image with dimensions of 300px by 300px.

To display this image within a circle, I have created the following CSS code:

img {
  width: 300px;
  height: 300px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
}

The problem I am facing is that the image doesn't fit perfectly inside the circular frame. It appears too large because parts of the image are being cut off due to the circular shape. One solution could be to use a smaller image size. However, resizing an image to 200px by 200px might distort it since the circle is larger than the image itself, causing it to stretch.

Do you have any suggestions on how to resolve this issue?

Below is the original picture I am working with:

https://i.sstatic.net/oWAqE.png

And here is the same picture displayed within a circle:

https://i.sstatic.net/wn58w.png

htmlcss

Answer №1

To achieve this effect, I recommend using a background image as it allows for more customization in terms of positioning within its container (in this scenario, a <div>).

You have the flexibility to adjust the background size and position to suit your needs, even with a non-symmetric image like the one you have.

div {
  width: 300px;
  height: 300px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
  background-image: url(https://i.imgur.com/z7YIJI6.png);
  background-size: 80% 80%;
  background-position: 50% 70%;
  background-repeat: no-repeat;
}
<div></div>

View the results:

https://example.com/image.png

Answer №2

Recommendation for using <div> as a wrapper:

img {
  z-index: -1;
  width: 300px;
  height: 300px;
  margin: auto;
  display: block;
  margin-top: 45px;
  position: relative;
}

div {
  width: 350px;
  height: 350px;
  display: block;
  border-radius: 50%;
  border: 2px solid black;
}
<div>
  <img src="https://i.sstatic.net/oWAqE.png">
</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

What is the best way to have my items fill the entire column space using flexbox?

Having 2 containers and wanting them to have the same height has been a challenge. I've been experimenting with flexbox and the flex-direction: column (flex-column) property, but I can't seem to get each element to divide the available container ...

css

Is it possible to designate a specific font family for italic font style and a different font family for regular font styles in VSCode?

Is it possible to use the "Operator Mono" font only for italic style and another font, such as "Fira Code," for other styles like bold, regular, semibold, etc. in VSCode? I attempted to change the font family to: "editor.fontFamily": "'Operator Mono ...

cssvisual-studio-codefonts

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

javascriptcssreactjsw3-css

Dynamic JavaScript Calculations Based on User Input in Real Time

I am in the process of creating a dynamic calculator that updates in real-time based on user input from a form. I have successfully implemented this feature using a sample div, but I am encountering difficulties when attempting to display the total inside ...

javascriptjqueryhtmlkeyup

"Is there a way to alter the background color of the second span within a Bootstrap row

I currently have 4 WordPress services in a loop, and I am trying to change the background color of the second service. However, when I try to apply the CSS background property, it ends up affecting all of the services. Here is my template code: <div ...

htmlcsstwitter-bootstrapbackground

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

cssinternet-explorer

Submitting the form with a target of _blank will result in the form being submitted on both a

I am currently working on a form that includes both a "Submit" button and a "Preview" button. While the submit button is functioning correctly, I am experiencing an issue with the Preview button. When clicked, it opens up a new page with the preview as in ...

phpjqueryhtmlformslaravel

The event binding for input with the specific class `.SomeClass` in the document is functional in Chrome, but encounters issues in Internet Explorer

I am facing an issue where I have a span with the contenteditable attribute and a function to detect input within it. //TextArea <span class="SomeClass" contenteditable></span> //Function $(document).on("input", ".SomeClass", function () { ...

javascriptjqueryhtmlinternet-explorergoogle-chrome

Prevent child element from being rotated along with parent element

I am facing an issue with two div elements: a parent element that is rotated and a child element that I want to remain unaffected by the rotation of its parent. To tackle this problem, I tried rotating the child element in the opposite direction of the pa ...

htmlcssrotationtransform

Getting around popup blockers on safari

Here is the HTML code I am working with: <a href = "#" class="fb">Facebook</a> I am using an onclick event handler that triggers window.open when the link above is clicked. This works fine in Chrome, but it does not work in Safari. How can I ...

javascriptjqueryhtml

What is the best way to remove a logo from a wordpress website?

I've come across a theme that I find quite appealing, but the "designed by" logo is positioned in a rather bothersome place - right in the center of the page on the left side. Is there a way for me to remove it from there and relocate it to the footer ...

phphtmlwordpress

Exporting an HTML table to Excel while excluding any hidden <td> elements

I have a web application with an HTML table that displays data to users. I wanted to export the table to Excel and found a jQuery code for it. However, the exported data includes information that is hidden in the table. Is there a way to export the tabl ...

javascripthtmljquery

Troubleshooting a CSS overflow problem in the main slider

While exploring the website , I encountered a minor issue. When I added "overflow: hidden" to the featured slider div, the images appeared stacked if JavaScript was enabled or the user's internet connection was slow. However, a new problem has arisen ...

htmlcssoverflow

There was an issue with the Google Maps embed API that resulted in an error with interpolation

My goal is to utilize the Google Maps API in order to showcase a map using data from a JSON file. However, whenever I attempt to incorporate the JSON data, an error message 'Error: [$interpolate:noconcat] Error while interpolating' pops up. < ...

javascripthtmlangularjsgoogle-maps

Automatically generating table through CSV file upload utilizing MySQL and PHP

My attempt to create a table by defining a table name first seems to be causing an issue in my code. I am encountering the following error message: An SQL syntax error has occurred; please refer to the MySQL server version manual for the correct syntax ...

phphtmlmysqlcsv

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

The absence of a scroll bar on the web application is preventing me from scrolling properly

The vertical scroll bar on my Angular app seems to have disappeared mysteriously. I haven't made any changes to the code recently, and I'm struggling to figure out why it's missing. I've spent days trying to troubleshoot this issue with ...

htmlcssangular

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...

javascripthtmljquerycssgoogle-apps-script

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Having an issue with applying a specific style to one of my div elements. When using the following code: :style="(index + 1) % 2 == (0) && type.Liste.length === indexVin + 1 ? `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem); ...

javascripthtmlcssvue.js

Unable to trigger .click event in Jquery after modifying CSS attributes

Looking for a solution with my HTML code snippet: <h2 class="more-button">Read More</h2> I want to change the position of another div when this button is clicked. I am trying to achieve this using: $(".more-button").click(function(){ $(" ...

javascriptjqueryhtmlcss