Issue with a responsive CSS circle element that holds an image

I'm struggling to figure out how to create 9 responsive CSS circles in a row, with each circle containing an img tag rather than a background image. The goal is to center the img and resize it based on the size of its parent circle div. These 9 circles should be aligned horizontally within a grid container, occupying individual cells. Notably, the fifth circle at the center should be twice the size of the others.

My approach for the smaller circle containers involves utilizing the following CSS properties:

border: blue 1px solid;
border-radius: 50%;
width: 100%;
height: 0%;
padding-top: 100%;
margin:auto;
overflow: hidden;

This CSS code was adopted from various online tutorials and suggestions presented in different Stack Overflow threads.

The CSS styling applied to the img tag is as follows:

width: 100%;
height: 100%;
object-fit: cover;

Inspired by this tutorial link: https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

However, I am encountering issues with the images not displaying, which I suspect may be due to the padding in the circle containers. I am uncertain about the necessary adjustments needed. Removing the padding and adding height directly to the containers resolves the image display issue, but the circles lose their responsiveness - leading to oval shapes when the page size changes.

Here is a fiddle showcasing the components under discussion: https://jsfiddle.net/jth3rb6m/

Answer №1

The reason why the images are not appearing round is because they are not square in shape.

.friend-cont {
  display: grid;
  justify-content: space-around;
  grid-template-columns: calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(20% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px);
  grid-column-gap: 5px;
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
}

.friend-pic {
  border: blue 1px solid;
  border-radius: 50%;
  width: 100%;
  height: auto;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

.friend-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-pic {
  border: blue 1px solid;
  border-radius: 50%;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}
<div class="friend-cont">

  <div class="profile-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

</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

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

What is the method for determining the width of a Mat-Table once it has been displayed?

When utilizing Angular Material Mat-Table in conjunction with Angular 8, I am passing the dataSource dynamically. The number of rows and columns varies each time. Is there a method to calculate the width of the table once it is rendered on the screen? &l ...

Updating the value of a time input tag using jQuery

I am currently trying to dynamically set the value of an HTML input tag with type="time" using jQuery. Here is the code for the HTML Tag: <input class="form-control" style="font-size: 1em;" type="time" name="time_star ...

What is the best way to showcase the following values using Vue.js?

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For mor ...

using jquery, how can you send multiple parameters in an ajax request

Hello and welcome! I'm having trouble passing parameters through an ajax URL. I am attempting to send multiple data using the jQuery $.ajax method to my PHP script, but I can only pass a single data item when concatenating multiple data entries toget ...

Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results ...

Webpack is notorious for creating multiple copies of images

Having an issue with Webpack where it's generating duplicate images, one of which is broken. I have an original image image, and after running Webpack, two duplicates are created. One works fine: image, but the other one is broken: image. I'm us ...

Adjusting the spacing between characters in SVG text elements

Take a look at this unique SVG: <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"><![CDATA[ .code { font-family: monospace; white-space: pre; tab-size: 4; } ]]></style> </defs> <text class="cod ...

What are the steps to adjusting page margins for Kindle devices?

While converting an HTML page for Kindle, I encountered a problem with multiple CSS files. The Kindle Guide recommends setting the left and right margins to 0 for normal body text in order to prevent content from falling off the edge of the screen or overl ...

Instant data entry upon clicking

In an attempt to automate input based on image pairs, I encountered a challenge. On one side, there are two images that need to be matched with input fields, and on the other side, there are corresponding letters for each image to fill in the inputs upon c ...

The picture is malfunctioning

I am experiencing an issue with the placement of an image in my HTML code. When I place the image inside the nav element, it works perfectly fine. However, when I try to put it inside the body or header elements, it doesn't display properly. I am new ...

Tips for addressing the issue of mat-list-item not occupying the entire row's space

Hello everyone, I am currently trying to render an article.component.html within my article-list-component.html in a list format. When I use plain HTML, it renders correctly as shown in picture 1: Title - author - Date Here is the code for my article-list. ...

Developing a progress bar with jQuery and Cascading Style Sheets (

Below is the code I'm currently using: <progress id="amount" value="0" max="100"></progress> Here is the JavaScript snippet I have implemented: <script> for (var i = 0; i < 240; i++) { setTimeout(function () { // this repre ...

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

How can you master the art of PHP templating like a pro?

Years ago, I started a small PHP website that has since grown into quite a mess. Despite having a separate template for the final HTML output, I still find myself handling a lot of HTML within the 'business logic' part of the code. My main issue ...

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

Prevent the occurrence of a fixed height problem associated with the Bootstrap Navbar (Mega Menu)

In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns. My code structu ...