誰能幫助我使我的圖片在HTML & ampCSS？

我根據Figma給我的CSS代碼設計了html格式的圖片，但是它與原始圖片的比例不同，所以圖片看起來有些變形。謝謝大家！

我嘗試使用最大寬度，100vw等。但是沒有用。

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

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

它看起來被壓扁的原因是因為你試圖調整的長寬比不同于圖片的長寬比。有幾種方法可以解決這個問題:

1.寬度或高度 如果您需要將它調整到一個特定的尺寸(例如，590像素的高度)，您可以省略其他屬性，瀏覽器會自動將您的圖像調整到正確的縱橫比

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

<div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" 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;"/>

我的首選方法是使用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>