如何使用 HTML 和 CSS 調整圖片大小和裁剪圖像，同時保持寬高比？

使用CSS 顯示調整大小和裁剪的圖像

簡介

顯示特定尺寸內的圖像同時保持其縱橫比可能具有挑戰性。本文探討如何結合使用 HTML 和 CSS 技術來有效地調整圖片大小和裁切圖片。

背景影像調整大小

background-image 屬性允許我們指定作為容器元素背景的影像。透過將background-size屬性設為cover，影像將自動調整大小以適應容器，同時保持其比例。

圖片調整大小

標籤可用於在網頁中嵌入圖片。透過指定寬度和高度屬性，我們可以明確地設定所需的尺寸。但是，如果不保持原始寬高比，則可能會導致影像失真。

組合技術

為了同時實現調整大小和裁剪，我們可以組合上述方法。我們建立一個容器元素，設定了背景圖像屬性和所需的背景大小。在容器內，我們放置一個 尺寸小於容器的元素。透過仔細調整 的邊距屬性，元素，我們可以有效地將影像裁切為所需的尺寸，同時保持其原始縱橫比。

範例

以下程式碼示範如何調整影像大小和裁切影像：

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.crop img {
  width: 400px;
  height: 300px;
  margin: -75px 0 0 -100px;
}

<div class="crop">
  <img src="https://i.sstatic.net/wPh0S.jpg" alt="Your image">
</div>

在此範例中，尺寸為200px 的容器元素(

) 150px 包含尺寸為400px x 300px 的圖像 ()。透過將容器上的溢出設為隱藏，影像將被裁剪，並透過操作 的邊距屬性來裁剪影像。元素，生成的圖像被有效地調整大小和裁剪以適合容器，同時保留其縱橫比。

以上是如何使用 HTML 和 CSS 調整圖片大小和裁剪圖像，同時保持寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！