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/