Bootstrap 5 card image overflow issue

[robin01]

Hello everybody,

I’m working through a bootstrap 5 Youtube tutorial and part of the tutorial talks about creating a profile card with a image on top(profile image) for most part it works but I’m having issues aligning the image. As of now the image seem to overlap or float over the card container.

I should also add that when the page is fully open its fine. the image overlaps when i start shrinking the screen,

Any ideas as to how to fix this?

image attached:

using Bootstrap 5
component issue: card / image alignment
image size: 246x205 (random image)

<div class="container">
        <div class="row mt-2 ">
            <!-- left col -->
            <div class="col-md-4">
                <div class="card bg-light">
                    <div class="card-body text-center">
                        <img src="../../images/Pic/Pic2.jfif" class="rounded-circle mb-3" alt="" /> 
                        <h3 class="card-title p-2"> Jane Doe</h3>
                        <!-- description -->
                        <p class="card-text m-2">
                            <span> Description</span><br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex, natus sunt voluptatum eveniet nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex, natus sunt voluptatum eveniet nulla.
                        </p>                        
                        <!--- social media buttons -->
                        <a href="#"><i class="bi bi-twitter text-dark mx-1"></i></a>
                        <a href="#"><i class="bi bi-facebook text-dark mx-1"></i></a>
                        <a href="#"><i class="bi bi-instagram text-dark mx-1"></i></a>
                    </div>
                </div>
            </div> <!-- END of first col -->
            <!-- right col -->
            <div class="col-md-8">
                right side
            </div><!-- END card -->  

        </div><!-- END row -->
    </div>

[PaulOB]

Put a max-width in there to make the image shrink.

e.g.

.card-body img.rounded-circle {
  max-width: 100%;
  height: auto;
}