Image overlap not consistent with different resolutions

Question

I understand what my issue is, I am just not entirely sure how to remedy it. My desired look is the first picture, it looks this way with a 375 x 667 screen size. When changing to any other resolution it off sets. My second image is only with a slight change of 414 x 896 resolution. I know this is because I am using absolute positioning, with top & left placements, I am just struggling to figure out how to make this responsive without doing custom top & left position for every screen size.

I am using Tailwind CSS and React

    return (
        <div>
            <img src={backdrop} alt="cover" className='relative mx-auto' />
            <div className='rounded-full size-28 flex items-center justify-center absolute left-6 top-48 border-2 border-groove-red '>
                <img src={profile} alt="profile" className='rounded-full size-24' />
            </div>
        </div>
    )

attempted to use flex, could not get images to overlap.

D.lola · Accepted Answer · 2024-08-07 19:01:01Z

0

It is best practise to Flexbox for centering elements, here is an example

    return (
        <div className='relative flex flex-col items-center justify-center'>
            <img src={backdrop} alt="cover" className='w-full h-auto' />
            <div className='rounded-full size-28 flex items-center justify-center absolute border-2 border-groove-red'>
                <img src={profile} alt="profile" className='rounded-full size-24' />
            </div>
        </div>
    );

OR

You can also use Tailwind CSS using responsive utilities

return (
    <div className='relative flex items-center justify-center'>
        <img src={backdrop} alt="cover" className='w-full h-auto' />
        <div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full size-28 flex items-center justify-center border-2 border-groove-red sm:top-1/3 sm:left-1/3 md:top-1/4 md:left-1/4'>
            <img src={profile} alt="profile" className='rounded-full size-24' />
        </div>
    </div>
);

OR

You can use the CSS grid, if you want to add complex which I think is not necessary

    return (
    <div className='relative flex flex-col items-center'>
        <img src={backdrop} alt="cover" className='w-full h-auto' />
        <div className='rounded-full size-28 flex items-center justify-center absolute border-2 border-groove-red'
             style={{ left: '10vw', top: 'calc(50% - 50px)' }}>
            <img src={profile} alt="profile" className='rounded-full size-24' />
        </div>
    </div>
);

edited Aug 7, 2024 at 19:01

answered Aug 7, 2024 at 16:04

D.lola

2,3222 gold badges9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cadhig Over a year ago

This centers the profile inside of the cover picture, which is not the result i was hoping for. In my reference pictures I have the profile icon halfway on the cover and halfway off, and it is set more to the left side. I would like to achieve this took on all resolutions.

D.lola Over a year ago

Your problem is quite unique, nevertheless I have tried to modify the code in step 3, let us see if that works?

Cadhig Over a year ago

I managed to figure it out, the 'backdrop' image needed a fixed height. When the screen would increase in size so did the backdrop image causing this issue.

Collectives™ on Stack Overflow

Image overlap not consistent with different resolutions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related