它看起来被压扁的原因是因为您试图调整大小的宽高比与图像的宽高比不同。有几种方法可以解决这个问题：

1.宽度或高度

如果您需要将其放入1个特定尺寸（例如height of 590 px），你可以省略其他属性，浏览器会自动调整你的图像大小到正确的长宽比

.foto_1 {
  position: absolute;
  left: 89px;
  top: 904px;
}

<div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" height="590">
</div>

2.对象适配

如果您需要图像适合 * 特定的空间 *，您需要决定要做出哪些牺牲-不显示完整的图像，显示完整的图像但周围有空白，或拉伸它。这可以通过object-fit property实现

.foto_1 {
  position: absolute;
  left: 89px;
  top: 904px;
}

.foto_1 img{
  object-fit: contain;
}

<div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" width="551" height="590">
</div>

您应该将宽度设置为所需大小的百分比。目前有一个固定的高度和宽度，这将导致您看到的结果。

<div class="foto_1"><img src="/ansmet item 1.jpg" alt="" style="width:50%"></div>

您可以设置图像的所需宽度或高度，然后将另一个值设置为auto，如下所示：

<img src="https://via.placeholder.com/800x1600" style="width: 300px; height: auto;"/>

或

<img src="https://via.placeholder.com/800x1600" style="width: auto; height: 300px;"/>

我的首选方法是使用css的后台选项。它可以让你控制是否要裁剪（=封面）或完全可见（=包含）。如果你想你也可以改变的立场，如果例如，如果你的图像顶部更经常是重要的。

.foto_1 {
  /* other properies */
  width: 400px;
  height: 150px;
  background:pink; /* just for demo */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.foto_2 {
  /* other properies */
  width: 400px;
  height: 150px;
  background:pink; /* just for demo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="foto_1" style="background-image: url('https://via.placeholder.com/800x1600');"></div>
<br />
<div class="foto_2" style="background-image: url('https://via.placeholder.com/800x1600');"></div>

你的不起作用的原因是因为你明确地告诉它要考虑这些尺寸。你让它做什么它就做什么。