HTML 彎曲圓中的中心圖像

Question

我有個問題。 在我的 angular 項目中，我有以下代碼：

 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>

現在我要做的是創建一個邊框為 1 px 的圓圈。 在那篇文章中，我想顯示一個圖標，以表明您可以上傳圖像。 當您單擊圓圈時，您可以 select 您的文件。 當您點擊上傳時，圓圈將被您的圖片填充，但是當您再次點擊您的圖片時，您可以重新上傳圖片。 問題是圖標和圖像沒有居中： 和

我怎樣才能解決這個問題？

Answer 1

將圖像和備用圖標的最大高度和最大寬度設置為 100%，並替換text-align: center; align-items: center; 對於.custom-file-upload

更新了 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>

更新了 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%;
}

這里的工作示例

如果要覆蓋整個分區，請使用圖像作為背景圖像 - 請參見此處的示例