使用CSS讓圖片放大不變形是很多前端開發(fā)者經常遇到的任務，特別是在網頁設計中。下面我就來介紹一些方法。

// 在CSS中設置圖片寬度為100%
img {
width: 100%;
height: auto;
}
// 使用屬性object-fit
// 這個屬性規(guī)定如何調整元素將被放置的空間
// 對于，這個屬性適用于高度和寬度都被指定的情形下
img {
width: 100%;
height: 300px;
object-fit: cover; // 圖片進行縮放，不拉伸或失真
}
// 使用屬性transform
// transform 屬性允許你平移、縮放、旋轉和傾斜元素
// 在使用縮放功能時，還要設置 transform-origin 屬性
// 這個屬性規(guī)定了transform的基點
img {
width: 100%;
height: 300px;
transform: scale(1.5); // 圖片縮放為1.5倍
transform-origin: top left;
}

以上就是CSS中讓圖片放大不變形的三種方法，可以根據實際情況選擇不同的方法進行使用。實際項目開發(fā)中，我們也可以將這些方法進行結合，以達到更好的效果。