Question 17180 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to get image to fill container laravel blade

I`m trying to create a profile screen for my website with an uploaded profile picture. I want the user’s uploaded image to fill the container. As this would ensure that all of the profile pictures are the same size and in the same place

<div class="row d-flex justify-content-center">
                            <div class="col-4 align-self-center border border-danger" style="width: 190px ;height: 190px; border-radius:70%;">
                        @if ($profile_picture != null)
                            <img src="{{ $profile_picture }}" style="border-radius:70% ;width:auto; height:auto; object-fit: fill;">
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                            </svg>
                            <i class="bi bi-person-circle"></i>
                        @endif
                            </div>
                        </div>

The current code makes it look like this(I put a border on the container to make it easier to see)

Current look

Tags:

2

Answers


  1. 0

    You mean something like this?

    <div class="d-flex justify-content-center">
    <div class="border border-danger" style="width: 190px;height: 190px;border-radius:70%;">
        @if ($profile_picture != null)
            <img src="{{ $profile_picture }}" style="border-radius:70%;width: 100%;height:auto;">
        @else
        <svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
        </svg>
        <i class="bi bi-person-circle"></i>
        @endif
    </div>
</div>

    Setting img width to 100% instead of auto mainly.

    You could also remove border-radius from img, and set overflow on the border div.

    Login or Signup to reply.
  2. 0

    Very easy. I used another code but u can apply it to your code

    #pic {
  background: no-repeat url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=640:*");
  width: 200px;
  background-size: cover;
  background-position: 60% 10%;
  height: 200px;
  border: 2px solid red;
  border-radius: 200px;
}
    <div id="pic">
  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search