在網(wǎng)頁設(shè)計(jì)中，插入圖片是常見的操作。通過CSS控制圖片的大小是很必要的，但是如何限制圖片的大小呢？
在CSS中，我們可以使用width和height屬性來設(shè)置圖片的大小，例如：

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

這樣的代碼可以將圖片的寬度設(shè)置為200像素，但高度則自動適應(yīng)。但是，如果我們希望限制圖片的最大高度和寬度呢？這時(shí)，我們可以使用max-width和max-height屬性：

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

這樣，圖片的寬度和高度都不會超過200像素和150像素。但是，有時(shí)候我們可能希望在限制大小的同時(shí)，保持圖片的寬高比例。這時(shí)，我們可以使用object-fit屬性和object-position屬性來控制圖片的顯示方式：

img {
max-width: 200px;
max-height: 150px;
object-fit: cover;
object-position: center center;
}

其中，object-fit屬性可以設(shè)置圖片如何填充img元素的區(qū)域，可選的值有：
- fill：拉伸圖片以填充img元素的整個(gè)區(qū)域，不保持寬高比例。
- contain：縮放圖片以適應(yīng)img元素的區(qū)域，保持寬高比例，并且圖片完整地顯示。
- cover：縮放圖片以填充img元素的區(qū)域，保持寬高比例，并且圖片至少部分顯示。
- none：不對圖片進(jìn)行縮放，保持原大小。
- scale-down：縮放圖片以適應(yīng)img元素的區(qū)域，但是如果縮放后的大小小于原大小，則保持原大小。
而object-position屬性可以設(shè)置圖片在img元素中的位置，可選的值有：
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
通過合理地運(yùn)用這些CSS屬性，我們可以在保持圖片大小的限制的同時(shí)，讓網(wǎng)頁的設(shè)計(jì)更加美觀。