CSS可以讓我們輕松地將圖片放在網(wǎng)頁上。但是，有時候我們發(fā)現(xiàn)圖片居中后被拉伸了，這讓我們感到很不滿意。下面，我們來分享一些方法來解決這個問題。

/* 方法一：使用 background-image 屬性 */
.center-image {
background-image: url("example-image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
/* 方法二：使用 flex 布局 */
.container {
display: flex;
justify-content: center;
}
.container img {
max-width: 100%;
max-height: 100%;
}
/* 方法三：使用絕對定位 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.child img {
max-width: 100%;
max-height: 100%;
}

以上三種方法都可以讓圖片居中不被拉伸。第一種方法使用了CSS中的 background-image 屬性，在CSS中設置圖片的背景，通過設置屬性 background-position 來讓圖片居中。第二種方法使用了 flex 布局，利用它的強大的居中對齊能力，讓圖片始終居中。第三種方法使用絕對定位來讓圖片居中，通過設置 top 和 left 為 50%，再利用 transform 屬性來確定圖片的位置。

總之，我們可以根據(jù)實際需求選擇使用不同的方法來實現(xiàn)圖片不拉伸居中。希望這篇文章對你有所幫助。