0

I have the following layout with two columns where the left column has an "profile picture" image which I want to be a centered circle cutout of the image. Right now, this is what I have:

<div>
    <div style="after:display: table; after:clear: both;">
        <div style="float: left; width: 20%;">
            <img class="alignnone wp-image-7" src="https://youthjamofficial.com/wp-content/uploads/2022/07/pexels-photo-592753.jpeg" alt="" style="max-width: 100%; max-height: 100%; border-radius: 50%;" />
        </div>
        <div style="float: left; width: 75%; padding-left: 5%;">
            <h1 style="font-size: 25px;">Alex James (SSS)</h1>
            <p>
                Lorem ipsum dolor sit amet et delectus accommodare his consul copiosae legendos at vix ad putent delectus delicata usu. Vidit dissentiet eos cu eum an brute copiosae hendrerit.
            </p>
        </div>
    </div>
</div>

To make the circular profile picture on its own, I can do something like this:

<div style="">
    <img src="https://youthjamofficial.com/wp-content/uploads/2022/07/pexels-photo-592753.jpeg" alt="" style="object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;" />
</div>

However, the above snippet needs a fixed width and height, but I want my image to be as big as the column size allows which I have done in the first snippet.

I would like any help in making the image in the first snippet to fill all space in the column and also be a circle like from the second snippet.

Balaram Behera
  • 1
  • 1
  • Your image is already round, and fills the "column" you put it in. There is a space in-between image and text because the text has a `padding-left: 5%`. See it here: https://jsfiddle.net/pory6cdn/ – Frank Fajardo Jul 06 '22 at 23:46
  • In the first snippet it is like an oval, but I would like that to be a circle instead like in the second snippet. You are right that it would work with a square image, but with a rectangular one it doesn't seem to work. – Balaram Behera Jul 07 '22 at 00:08
  • Did you check the fiddle link I shared? The image there is definitely round. – Frank Fajardo Jul 07 '22 at 00:12
  • I did see it, but the image source is a square image so the border-radius: 50% makes it a circle, but if the image source is a rectangle (which is what I have), it becomes an oval. I would like to crop it into a circle with CSS which I could do in the second snippet, but I want to do that without setting a specific width and height for the image. – Balaram Behera Jul 07 '22 at 00:14
  • 1
    add `aspect-ratio: 1;` to the image and object-fit as well – Temani Afif Jul 07 '22 at 00:23

0 Answers0