flex 圆圈中的 HTML 中心图像

Posted 2023-03-13

【中文标题】flex 圆圈中的 HTML 中心图像

【英文标题】：HTML Center image in flex circle

【发布时间】：2021-12-31 09:07:49

【问题描述】：

我有问题。在我的角度项目中，我有以下代码：

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 像素的圆圈。在那篇文章中，我想显示一个图标，以表明您可以上传图像。当您单击圆圈时，您可以选择您的文件。当您点击上传时，圆圈将被您的图片填充，但是当您再次点击您的图片时，您可以重新上传图片。问题是图标和图像没有居中： 和

我该如何解决这个问题？

【问题讨论】：

图片没有适合这个圆圈的尺寸...你有2个选择，1）减小宽度并设置height: auto 2）使用width: 100%和height: auto

【参考方案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%;

Working example here

如果要覆盖整个分区，请使用图片作为背景图片 - see example here

【讨论】：

谢谢，这就是我要找的。就一个问题。我怎样才能让图像填满整个圆圈。当我上传一个矩形图像时，我希望它被放大，直到它使用整个圆圈。我将object-fit: fill; 添加到img 类中，但这不起作用

当然，请查看我的更新答案和链接。您可以根据自己的要求对 CSS 中的背景属性进行更多实验，例如 background-size、background-position 等。

只有一件事，您的背景图片是来自互联网的图片，但我正在使用 <i> 的字体真棒图标这也可能吗？

@A.Vreeswijk 更新了我的示例链接，用您的图标替换默认图像并添加相同的类。