Question

0

83

Views

HTML Center image in flex circle

I have a problem. In my angular project I have the following code:

onChange(event: any) {
    var reader = new FileReader();
    reader.onload = (event: any) => {
        this.url = event.target.result;
    };
    reader.readAsDataURL(event.target.files[0]);
}

#upload-icon {
    align-items: center;
    font-size: 30px;
}

.image-content {
    width: 70px;
    height: 70px;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}


img {
    border-radius: 50%;
    height: 70px;
    width: 70px;
    object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<label class="custom-file-upload">
    <input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input"
           (change)="onChange($event)">
    <div class="image-content" *ngIf="!url">
        <i class="far fa-images"></i>
    </div>
    <div class="image-content" *ngIf="url">
        <label for="file-input">
            <img [src]="url"/>
        </label>
    </div>
</label>

Now what I am trying to do is create a circle with a border of 1 px. In that cicle I want to show an icon, to show that you can upload an image. When you click on the circle you can select your file. When you hit upload, the circle will be filled with your image, but when you click your image again, you can reuplaod an image. The problem is that the icon and image are not centered: and

How can I fix this?

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-04-19T22:00:31.655Z

Set 100% as max height and max width to image and alternate icon, and replace text-align: center; to align-items: center; for .custom-file-upload

Updated HTML -

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<label class="custom-file-upload">
    <input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input"
           (change)="onChange($event)">
    <div class="image-content" *ngIf="!url">
        <i class="far fa-images icon"></i>
    </div>
    <div class="image-content" *ngIf="url">
        <label for="file-input">
            <img [src]="url"/>
        </label>
    </div>
</label>

Updated CSS -

#upload-icon {
  align-items: center;
  font-size: 30px;
}

 .image-content {
  max-width: 100%;
  max-height: 100%;
}

input[type='file'] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  padding: 12px;
  cursor: pointer;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img,
.icon {
  max-height: 100%;
  max-width: 100%;
}

Working example here

If you want to cover entire division, use image as background image - see example here

0

83

HTML Center image in flex circle

1 answers

0

Find remote jobs

Andres GPT