CSS中讓圖片等比例縮放的方法

在CSS中，我們可以使用width和height屬性來控制圖片的縮放，如果我們只設(shè)置width或height屬性中的一個(gè)，另一個(gè)屬性將會(huì)自動(dòng)縮放以保持圖片的比例，這就是等比例縮放。

如果我們有一張寬度為300像素的圖片，我們可以將其高度設(shè)置為200像素，這樣圖片就會(huì)按照其原始比例進(jìn)行縮放。

img {
  width: 300px;
  height: 200px;
}

或者，我們可以使用max-width和max-height屬性來限制圖片的***大寬度和高度，這樣圖片在縮放時(shí)不會(huì)超過其原始大小。

img {
  max-width: 300px;
  max-height: 200px;
}

我們還可以使用object-fit屬性來控制圖片的填充方式，我們可以將其設(shè)置為contain，這樣圖片就會(huì)在其容器內(nèi)等比例縮放并保持其原始比例。

img {
  width: 300px;
  height: 200px;
  object-fit: contain;
}

這種方法可以確保圖片在縮放時(shí)不會(huì)變形，并保持其原始比例，希望這篇文章能幫助你更好地理解和應(yīng)用CSS中的等比例縮放技術(shù)。