我的CSS在某些计算机上有效，但在其他计算机上则无效

Question

我已修复帖子中提供的问题和代码

我已经在我的PC笔记本电脑上构建了一个网站，并且已经在IE Chrome和Firefox上对其进行了测试，看起来还不错。然后，我将站点文件通过电子邮件发送给自己（已压缩并作为Google驱动器链接），因为我想在带有Safari的Mac上对其进行测试。由于某种原因，当我在Mac上打开Chrome中的html文件时，网站徽标被垂直拉伸了，我不确定为什么，因为它与我在原始计算机（chrome）上测试过的浏览器相同，并且在那里看起来仍然不错。当我尝试在野生动物园中进行测试时，这是同样的问题。

我的代码中是否有可能导致此问题的东西？

我专门指的图片是位于div中的“ cover”类的cover.png。

理想的结果是图像以正常比例显示，并且没有垂直拉伸。

具体来说，我需要知道我所做的工作，从而使使用相同浏览器的两台计算机上的外观看起来不同。

这是该网站适用部分的代码。

<script src="node_modules/chart.js/src/chart.js"></script>

<!--<button mat-button mat-raised-button color="primary" (click)="populate_data()">Update</button>-->

<div>
  <canvas baseChart class="chart" height ='450'

        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType">

      </canvas>
    </div>

Answer 1

我不确定为什么，但是如果您将align-items:center添加到.cover类中，它将解决该问题。