0
84
ViewsImagen de centro HTML en círculo flexible
Tengo un problema. En mi proyecto angular tengo el siguiente código:
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> Ahora lo que intento hacer es crear un círculo con un borde de 1 px. En ese ciclo quiero mostrar un icono, para mostrar que se puede subir una imagen. Al hacer clic en el círculo, puede seleccionar su archivo. Cuando presione cargar, el círculo se llenará con su imagen, pero cuando haga clic en su imagen nuevamente, puede volver a cargar una imagen. El problema es que el icono y la imagen no están centrados: 
y 
¿Cómo puedo arreglar esto?
1 answers
Answer question0
Establezca 100% como altura máxima y ancho máximo para la imagen y el icono alternativo, y reemplace text-align: center; para align-items: center; para .custom-file-upload
HTML actualizado -
<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>CSS actualizado -
#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%; }Si desea cubrir toda la división, use la imagen como imagen de fondo; vea el ejemplo aquí