本文目錄導(dǎo)讀：

1. 使用CSS的transform屬性
2. 使用CSS的width和height屬性

CSS控制圖片等比放大縮小的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要控制圖片的大小，而CSS（層疊樣式表）可以幫助我們輕松地實(shí)現(xiàn)這一需求，在放大或縮小圖片時(shí)，保持其等比（即寬度和高度按相同的比例放大或縮?。┦且粋€(gè)重要的考慮因素，因?yàn)檫@有助于保持圖片的外觀和完整性，下面，我們將討論如何使用CSS來(lái)等比放大或縮小圖片。

使用CSS的transform屬性

CSS的transform屬性可以用來(lái)縮放元素，包括圖片，我們可以通過(guò)設(shè)置transform: scale(x, y);來(lái)實(shí)現(xiàn)等比縮放，x和y分別代表水平和垂直縮放比例，如果我們想要將圖片等比縮小到原來(lái)的0.5倍，我們可以使用以下CSS代碼：

img {
  transform: scale(0.5, 0.5);
}

使用CSS的width和height屬性

除了使用transform屬性外，我們還可以通過(guò)設(shè)置圖片的width和height屬性來(lái)等比放大或縮小圖片，這種方法需要我們先獲取圖片的原尺寸，然后根據(jù)需要放大或縮小的比例來(lái)計(jì)算新的寬度和高度，如果我們想要將圖片等比放大到原來(lái)的2倍，我們可以使用以下CSS代碼：

img {
  width: 200%;
  height: 200%;
}

需要注意的是，使用這種方法時(shí)，我們需要確保新的寬度和高度是整數(shù)，否則可能會(huì)出現(xiàn)圖片變形的問(wèn)題。

CSS提供了多種方法來(lái)等比放大或縮小圖片，我們可以根據(jù)自己的需求選擇***適合的方法。