誰(shuí)能幫助我使我的圖片在HTML & ampCSS？

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

我嘗試使用最大寬度，100vw等。但是沒(méi)有用。

.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>

它看起來(lái)被壓扁的原因是因?yàn)槟阍噲D調(diào)整的長(zhǎng)寬比不同于圖片的長(zhǎng)寬比。有幾種方法可以解決這個(gè)問(wèn)題:

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

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

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

您應(yīng)該將寬度的百分比設(shè)置為您想要的大小。目前有一個(gè)固定的高度和寬度，這將導(dǎo)致你看到的結(jié)果。

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

您可以設(shè)置所需的圖像寬度或高度，然后將另一個(gè)值設(shè)置為auto，如下所示:

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

我的首選方法是使用css的背景選項(xiàng)。它可以讓你控制是要裁剪(=覆蓋)還是完全可見(jiàn)(=包含)。如果你愿意，你也可以改變位置，例如，如果你的圖像頂部更經(jīng)常是重要的。

.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>