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

1. 響應(yīng)式設(shè)計(jì)

CSS技巧：保持圖片原始大小，避免拉伸

在網(wǎng)頁(yè)設(shè)計(jì)中，保持圖片的原始大小而不被拉伸是一項(xiàng)重要的技巧，這可以通過(guò)使用CSS（層疊樣式表）來(lái)實(shí)現(xiàn)，下面，我們將詳細(xì)介紹如何使用CSS來(lái)設(shè)置不拉伸圖片大小。

一、使用CSS的width和height屬性

在CSS中，我們可以使用width和height屬性來(lái)設(shè)定圖片的寬度和高度，如果我們希望圖片保持其原始比例而不被拉伸，我們可以設(shè)定具體的像素值或者設(shè)定***大寬度和高度為百分比。

img {
    width: 300px;  /* 設(shè)置圖片寬度 */
    height: auto;  /* 讓高度自動(dòng)調(diào)整以保持圖片比例 */
}

二、使用CSS的object-fit屬性

object-fit屬性定義了元素（如圖片）如何在其容器中進(jìn)行縮放和定位，為了保持圖片的原始大小而不拉伸，我們可以設(shè)置object-fit為contain或cover。

img {
    width: 100%;  /* 使圖片寬度與容器寬度相同 */
    height: 100%; /* 使圖片高度與容器高度相同 */
    object-fit: contain; /* 保持圖片比例并填充容器 */
}

響應(yīng)式設(shè)計(jì)

在響應(yīng)式設(shè)計(jì)中，我們通常會(huì)希望圖片在不同大小的屏幕上都能保持其原始比例，這時(shí)，我們可以使用百分比來(lái)設(shè)定圖片的寬度和高度，或者使用媒體查詢(xún)來(lái)根據(jù)屏幕大小調(diào)整圖片大小。

img {
    width: 100%;  /* 使圖片寬度始終與容器寬度相同 */
    height: auto;  /* 讓高度自動(dòng)調(diào)整以保持圖片比例 */
}

通過(guò)合理使用CSS的width、height、object-fit等屬性，我們可以輕松實(shí)現(xiàn)圖片的原始大小不被拉伸，我們還需要考慮到響應(yīng)式設(shè)計(jì)的需求，確保圖片在不同大小的屏幕上都能正常顯示。