如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸？

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

問題：

問題：

您想要

問題：

您想要顯示來自URL 的特定寬度和高度的圖像，即使其長寬比與所需尺寸不同。目標是在保持原始比例的情況下調整影像大小，然後將其裁剪到所需的大小。
• CSS解決方案：
• 要實現調整大小和裁剪，您可以結合以下技術：

調整大小： 使用HTML img元素的寬度和高度屬性來調整影像大小。這將保持原始影像的縱橫比。

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

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

裁切：

<div class="crop">
  <img src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="Image">
</div>

建立具有所需最終尺寸的容器元素（例如 div）。為此容器設置隱藏的溢出以裁剪任何多餘的圖像。

• 實作：
• 在此範例中：

影像將被調整為寬度高度150px（保持寬高比）。

margin 屬性用於透過移動影像在容器內的位置來裁切影像。

容器的溢出屬性設定為隱藏，以確保只有影像的所需部分是顯示。 結果：此組合允許您以特定尺寸顯示圖像，同時保持其原始寬高比並裁剪它以適合您的需要尺寸。

以上是如何僅使用 CSS 調整圖片大小並將圖片裁切為特定尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！